4

Quem nunca se esqueceu de passar uma “dependência” ao array de dependência dos hooks do React?

É um infeliz fardo que toda pessoa que utiliza o React tem que estar atento: passar a dependência correta para o efeito ou hook que o exige. Criaram até um plugin ao ESLint para facilitar isso. Passa uma aura de leaky abstraction, mas não vem ao caso.

  • O que é esse “array de dependências”?
  • Por que ele é necessário nesse tipo de hook? Por que o React o exige?
  • Como o React utiliza os valores que passo no array em questão?

3 Respostas 3

0

Quando você usa um hook do React em seu código, é possível fornecer um array de dependências como argumento opcional. Esse array é uma lista de valores de que o hook depende. Quando um desses valores mudar, o hook é chamado novamente.

Ele compara os valores atuais das dependências com os valores que estavam no array na última vez que o hook foi executado. Se todos os valores forem os mesmos, o hook não é chamado novamente. Se algum valor tiver mudado, o hook é chamado novamente e os valores atuais são passados como argumentos.

Isso é útil porque permite que o hook atualize seu estado e re-execute sua lógica de maneira apropriada quando os valores de dependência mudam. Isso é especialmente útil para os hooks que usam efeitos, como useEffect, pois permite que você controle quando os efeitos são executados.

Fornecer um array de dependências é opcional, mas é uma boa prática fazê-lo, pois pode ajudar a evitar problemas de performance e comportamentos inesperados em seu aplicativo. Por exemplo, se você não fornecer um array de dependências para um hook que usa useEffect, ele será executado a cada renderização, o que pode ser ineficiente e pode levar a comportamentos inesperados se o efeito depender de valores que mudam frequentemente.

0

Ola, usar o parâmetro de dependências irai depender da sua lógica!

O que é um "array de dependências"? O "array de dependências" é o segundo argumento que você passa para certos hooks do React, como useEffect, useCallback, e useMemo. Ele é uma lista de valores que o React observa para determinar quando a função do hook deve ser executada novamente. O array de dependências é uma maneira de informar ao React quais valores influenciam a lógica dentro do hook.

useEffect(() => {
  // Efeito colateral aqui
}, [dependency1, dependency2, ...]);

Por que devo fornecer um "array de dependências"?

Controle de Reexecução:

Ao fornecer um array de dependências, você controla quando o efeito deve ser reexecutado. O React reexecuta o efeito apenas quando algum dos valores no array muda. Isso pode melhorar o desempenho ao evitar execuções desnecessárias do efeito.

Evitar Loops Infinitos:

Sem um array de dependências, o efeito é executado após cada renderização, o que pode causar loops infinitos e problemas de desempenho. Especificar dependências evita esse problema, pois o efeito só é executado quando realmente necessário.

Melhoria de Desempenho:

Reduz a carga computacional ao garantir que os cálculos e efeitos sejam realizados somente quando necessário. Isso ajuda a manter a aplicação mais rápida e eficiente.

Claridade e Manutenção do Código:

O array de dependências torna o código mais previsível e fácil de entender. Ele explicita quais valores o efeito depende, facilitando a manutenção e evitando bugs.

Exemplos simples usados com frequência!

useEffect sem dependências:

useEffect(() => {
  // Este efeito é executado após cada renderização
  console.log('Renderizou!');
});

useEffect com array de dependências:

useEffect(() => {
  // Este efeito é executado apenas quando count ou data mudam
  console.log('Count ou data mudou!');
}, [count, data]);
-1

Vou dar um exemplo básico:

const MeuComponente = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback(()=>{
     setCounter(counter + 1);
  },[])

  return (
     <h1>{counter}</h1>
     <button type="button" onClick={()=> incrementCounter()}>Incrementar</button>

  )

}

export default MeuComponente;


Na forma acima sem um array de dependencias, no momento em que o react cria a função incrementCounter o valor do counter é 0.

Então ao chama-lo no click do botão, é feito o set de um novo valor sendo passado (counter + 1). Note que esse counter vale 0, logo o novo valor para counter sera 1.

Porém nos próximos cliques no botão ao chamar a função de incremento, o valor da variavel counter lá dentro continua sendo 0, pois essa função só foi criada uma vez com o uso de useCallback, e o valor contido nela ainda é que o counter era 0.

Ou seja, a partir disso não importa quantos cliques dê no botão o valor de counter sempre será exibido como 1, mas dentro da função ele ainda é 0.

Isso significa que o valor de counter não foi atualizado lá dentro da função.

Para fazer com que o valor lá dentro seja atualizado e reflita o valor real, é necessário inclui-lo no array de dependencias.

Isso faz com que a função sofra uma atualização e que os valores contidos lá dentro sejam atualizados com base nesse array de dependencias.

const MeuComponente = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback(()=>{
     setCounter(counter + 1);
  },[counter])

  return (
     <h1>{counter}</h1>
     <button type="button" onClick={()=> incrementCounter()}>Incrementar</button>

  )

}

export default MeuComponente;


Claro que é só um exemplo, o ideal seria ao fazer setCounter(prev=> prev + 1), isso evitaria ter que passar dependencias ao useCallback.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .