devterview_$ iniciar simulação

Cenário: useEffect rodando em loop infinito

MédioPlenoHooks

Pergunta

Um componente React está causando um loop infinito de re-renders por causa de um useEffect. O que provavelmente está errado e como você investiga?

Resposta esperada

Causa mais comum: o array de dependências contém um valor recriado a cada render (um objeto, array ou função criados inline no corpo do componente), então o React nunca considera as dependências 'iguais' entre renders e o efeito roda de novo — e se o efeito, por sua vez, atualiza um estado que está nas dependências, isso gera o loop. A investigação: olhar o que o efeito faz (seta estado?) e o que está no array de dependências, checando se algum item muda de identidade a cada render mesmo com o mesmo conteúdo. A correção passa por memoizar o valor (useMemo/useCallback) ou mover a criação para fora do componente/efeito.

Por que perguntam isso

Sinal forte: o candidato pergunta 'o que tem no array de dependências' antes de sugerir qualquer correção, em vez de já sugerir '[] vazio' de forma reflexa.

#react#hooks#debugging
publicidade

Perguntas de acompanhamento

Relacionadas