Para que serve um array de dependências no React?

A matriz de dependências (dependency array) nos hooks do React (por exemplo, useEffect, useMemo, useCallback) indica de quais valores depende a execução do efeito ou da função memorizada.

A sua utilização permite:

1. Otimizar o desempenho: O React executa novamente o efeito ou recalcúla o valor apenas quando algum dos valores na matriz de dependências mudou desde a última renderização. Isto previne cálculos e atualizações desnecessárias.
2. Evitar ciclos infinitos: Sem uma matriz de dependências ou com dependências mal especificadas, o efeito pode ser executado em cada renderização, causando uma atualização de estado que provoca uma nova renderização, criando um ciclo infinito. Especificar dependências garante que o efeito só seja executado quando realmente necessário.
3. Controlar o ciclo de vida do efeito:
   • Uma matriz vazia [] significa que o efeito será executado apenas uma vez após a primeira renderização (semelhante ao componentDidMount). Não será reexecutado em renderizações subsequentes, mesmo que o estado ou as props do componente mudem.
   • A ausência de uma matriz de dependências (ou undefined) significa que o efeito será executado em cada renderização do componente.

Exemplo com useEffect:

// O efeito é executado apenas uma vez após a primeira renderização
useEffect(() => {
  console.log('Componente montado');
}, []);

// O efeito é executado na primeira renderização e quando o valor de count muda
useEffect(() => {
  console.log('O valor de count mudou:', count);
}, [count]);

// O efeito é executado em cada renderização
useEffect(() => {
  console.log('Renderização realizada');
});

Exemplo com useMemo:

// O valor expensiveResult é recalculado apenas quando a ou b mudam
const expensiveResult = useMemo(() => {
  console.log('Recalculando...');
  return a * b;
}, [a, b]);

Exemplo com useCallback:

// A função handleClick é recriada apenas quando o id muda
const handleClick = useCallback(() => {
  console.log('Clicado no elemento com id:', id);
}, [id]);

A especificação correta da matriz de dependências é fundamental para o funcionamento correto dos hooks e para o desempenho das aplicações React.