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

Все о массиве Dependency и его связи с useEffect.

1 ] useEffect() в двух словах 📌

Хук useEffect() в React позволяет выполнять побочные эффекты в ваших компонентах и запускается при каждом рендере. Некоторые побочные эффекты включают в себя выборку данных, обновление DOM, изменение CSS-эффектов и таймеров. UseEffect принимает два параметра - функцию для выполнения побочного эффекта и зависимость (необязательную).

useEffect(<function>,<dependency>);

2 ] Массив зависимостей ✍🏻

Массив зависимостей в основном указывает хуку "срабатывать только при изменении массива зависимостей". Как упоминалось выше, каждый рендеринг будет вызывать useEffect для повторного выполнения побочного эффекта! Вот где полезны массивы зависимостей, чтобы контролировать запуск побочных эффектов. Рекомендуется всегда передавать второй параметр, принимающий массив. Ниже приведен пример для дальнейшего пояснения -

1) Dependency Passed (Empty array).

useEffect(() =>{
  fetch('https://iamlearningreact.com');
// RUNS ONLY ON THE FIRST RENDER
},[]);

2) Without Dependency 

useEffect(() =>{
// RUNS ON EVERY RENDER
console.info("I'LL BE CALLED ON EVERY RENDER!🤷‍♀️");
});

Если вы передаете пустой массив [], ваш побочный эффект будет выполняться только один раз (очень часто, когда вы хотите получить что-то). Если у вас массив с несколькими зависимостями, хук будет срабатывать при изменении любого из элементов массива:

useEffect(() => {
  // this will run if `value1` OR `value2` changes
  console.info('Either value1 or value2 changed (or both');
}, [value1, value2]);

3 ] Что должно быть помещено в массив зависимостей? ✨

Если переменная объявлена вне хука, но используется внутри него, то она должна находиться в массиве depenendency. Он включает в себя как переменные, так и функции.

import { useEffect } from 'react';

const Example (){
  const name = 'Cam';

  const exampleFunction = (age) =>{
              console.info(`My name is ${name} and I am ${age} year's old`);
    };

  useEffect(() =>{

      exampleFunction(22);

  }[name, exampleFunction]);

return <p> React Hooks (●'◡'●) </p>
}

Хуки React, которые имеют зависимости, - useEffect(), useLayoutEffect(), useCallback(), useMemo(), useImperativeHandle() [мало используется].

Спасибо, что читаете! Загляните в мой профиль для других статей, связанных с PHP, React, Node. 😊