За какво се посочва масивът с зависимости в React?

Масивът с зависимости (dependency array) в React hooks (например, useEffect, useMemo, useCallback) показва от кои стойности зависи изпълнението на ефекта или запаметената функция.

Използването му позволява:

1. Оптимизиране на производителността: React повторно изпълнява ефекта или пресмята стойността само когато някоя от стойностите в масива с зависимости се е променила от последното рендериране. Това предотвратява ненужни изчисления и актуализации.
2. Избягване на безкрайни цикли: Без масив с зависимости или с неправилно посочени зависимости, ефектът може да се изпълнява при всяко рендериране, което води до актуализация на състоянието, която от своя страна предизвиква ново рендериране, създавайки безкраен цикъл. Посочването на зависимости гарантира, че ефектът се стартира само когато наистина е необходимо.
3. Контрол върху жизнения цикъл на ефекта:
   • Празният масив [] означава, че ефектът ще се изпълни само веднъж след първото рендериране (аналогично на componentDidMount). Той няма да се изпълнява повторно при следващи рендерирания, дори ако състоянието или пропсите на компонента се променят.
   • Липсата на масив с зависимости (или undefined) означава, че ефектът ще се изпълнява при всяко рендериране на компонента.

Пример с useEffect:

// Ефектът се изпълнява само веднъж след първото рендериране
useEffect(() => {
  console.log('Компонентът е монтиран');
}, []);

// Ефектът се изпълнява при първото рендериране и при промяна на стойността на count
useEffect(() => {
  console.log('Стойността на count се промени:', count);
}, [count]);

// Ефектът се изпълнява при всяко рендериране
useEffect(() => {
  console.log('Рендериране');
});

Пример с useMemo:

// Стойността `expensiveResult` се пресмята само при промяна на a или b
const expensiveResult = useMemo(() => {
  console.log('Пресмятам отново...');
  return a * b;
}, [a, b]);

Пример с useCallback:

// Функцията `handleClick` се създава отново само при промяна на id
const handleClick = useCallback(() => {
  console.log('Кликнат е елемент с id:', id);
}, [id]);

Правилното посочване на масива с зависимости е от съществено значение за правилната работа на hooks и производителността на React приложенията.