¿Para qué se indica un array de dependencias en React?

La matriz de dependencias (dependency array) en los hooks de React (por ejemplo, useEffect, useMemo, useCallback) indica de qué valores depende la ejecución del efecto o la función memorizada.

Su uso permite:

1. Optimizar el rendimiento: React vuelve a ejecutar el efecto o recalcula el valor solo cuando alguno de los valores en la matriz de dependencias ha cambiado desde la última renderización. Esto previene cálculos y actualizaciones innecesarias.
2. Evitar ciclos infinitos: Sin una matriz de dependencias o con dependencias mal especificadas, el efecto puede ejecutarse en cada renderizado, causando una actualización de estado que vuelve a provocar un renderizado, creando un ciclo infinito. Especificar dependencias garantiza que el efecto solo se ejecute cuando realmente sea necesario.
3. Controlar el ciclo de vida del efecto:
   • Una matriz vacía [] significa que el efecto solo se ejecutará una vez después del primer renderizado (similar a componentDidMount). No se volverá a ejecutar en renderizados posteriores, incluso si cambian el estado o las props del componente.
   • La ausencia de una matriz de dependencias (o undefined) significa que el efecto se ejecutará en cada renderizado del componente.

Ejemplo con useEffect:

// El efecto se ejecuta solo una vez después del primer renderizado
useEffect(() => {
  console.log('Componente montado');
}, []);

// El efecto se ejecuta en el primer renderizado y cuando cambia el valor de count
useEffect(() => {
  console.log('El valor de count cambió:', count);
}, [count]);

// El efecto se ejecuta en cada renderizado
useEffect(() => {
  console.log('Se realizó un renderizado');
});

Ejemplo con useMemo:

// El valor expensiveResult se recalcula solo cuando cambian a o b
const expensiveResult = useMemo(() => {
  console.log('Recalculando...');
  return a * b;
}, [a, b]);

Ejemplo con useCallback:

// La función handleClick se crea de nuevo solo cuando cambia id
const handleClick = useCallback(() => {
  console.log('Se hizo clic en el elemento con id:', id);
}, [id]);

Es fundamental especificar correctamente la matriz de dependencias para el correcto funcionamiento de los hooks y el rendimiento de las aplicaciones React.