Хук useEffect позволяет вам выполнять побочные эффекты в ваших компонентах. По умолчанию, какой бы код ни помещался внутрь useEffect, он будет выполняться после каждого рендеринга. Хотя у этого хука много применений, давайте сосредоточимся на извлечении данных.

Для начала, чтобы использовать хук useEffect, нам нужно сначала импортировать его в компонент React, в котором вы будете его использовать.

import { useEffect } from “react”;

Внутри нашего компонента мы вызываем хук useEffect. Хук useEffect принимает два аргумента: функцию обратного вызова и массив зависимостей. Хотя второй аргумент является необязательным, ваши данные будут бесконечно извлекаться без массива зависимостей, и вы застрянете в бесконечном цикле.

useEffect(() => {}, [])

Массив зависимостей

Хорошо, мы избежали ужасного бесконечного цикла, но что такое массив зависимостей? Проще говоря, аргумент зависимостей позволяет вам управлять запуском побочных эффектов.

Нет массива зависимостей

Запускайте побочный эффект каждый раз при рендеринге нашего компонента
useEffect(() => {})

Пустой массив зависимостей

Запускайте побочный эффект только при первом рендеринге нашего компонента
useEffect(() => {}, [])

Массив зависимостей с элементами в нем

Запускать побочный эффект в любое время при изменении переменных
useEffect(() => {}, [variable1, variable2])

После включения функции обратного вызова и массива зависимостей нам нужно получить некоторые данные и добавить метод then(). Мы можем начать с использования console.log(), чтобы подтвердить, что наши данные были успешно получены.

useEffect(() => {
  fetch("your API url")
    .then((r) => r.json())
    .then((data) => console.log(data));
}, []);

После подтверждения того, что данные были зарегистрированы, мы можем продолжить, обновив какое-то состояние с помощью возвращенных данных json.

Вот пример фрагмента кода, в котором все собрано вместе с использованием пустого массива зависимостей:

function RandomRecipe() {
  const [recipe, setRecipe] = useState([]);
  useEffect(() => {
    fetch(
      `https://api.spoonacular.com/recipes/random
      apiKey=${API_KEY}`
    )
      .then((r) => r.json())
      .then((data) => {
        setRecipe(data.recipes);
      });
  }, []);

Ниже, используя аналогичный пример фрагмента кода, в массиве зависимостей есть переменная, которая использует хук useParams. В приведенном ниже примере params.type запускает повторный рендеринг, вызывая динамическое изменение URL-адреса.

function getDishType() {
  const [dishType, setDishType] = useState([]);
  let params = useParams();
  const getDishType = (name) => {
    fetch(
      `https://api.spoonacular.com/recipes/complexSearch?
      apiKey=${API_KEY}&type=${name}&number=100`
    )
      .then((r) => r.json())
      .then((data) => {
        setDishType(data.results);
      });
  };
  useEffect(() => {
    getDishType(params.type);
  }, [params.type]);

. . .
function App() {
  return (
    <div>
      <Router>
        <Switch>
             .
             .
             .
          <Route path="/dishType/:type">
            <DishType />
          </Route>
             .
             .
             .