{"id":67660,"date":"2024-04-04T08:14:52","date_gmt":"2024-04-04T11:14:52","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=67660&post_type=knowledgebase&preview_id=67660"},"modified":"2025-10-01T17:00:30","modified_gmt":"2025-10-01T20:00:30","slug":"react-hook-useeffect-has-a-missing-dependency","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/react-hook-useeffect-has-a-missing-dependency\/","title":{"rendered":"Como Corrigir o Erro \u201cReact Hook useEffect Has a Missing Dependency\u201d"},"content":{"rendered":"

O hook useEffect<\/code> do React<\/a> se tornou um recurso popular na biblioteca React<\/a> desde sua introdu\u00e7\u00e3o na vers\u00e3o 16.8. Ele permite que os desenvolvedores executem efeitos colaterais, como buscar dados<\/a>, atualizar o DOM e assinar eventos dentro de componentes funcionais.<\/p>\n

No entanto, o hook useEffect<\/code> pode ser complicado de usar \u00e0s vezes. Um erro comum que os desenvolvedores encontram \u00e9 o “React hook useEffect has a missing dependency”.<\/p>\n

Neste artigo, discutiremos as causas desse erro e forneceremos v\u00e1rias solu\u00e7\u00f5es para corrigi-lo.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

O que causa o erro “React hook useEffect has a missing dependency”?<\/h2>\n

O erro “React hook useEffect has a missing dependency” ocorre quando o hook useEffect<\/code> tem uma array de depend\u00eancias incompleta ou ausente.<\/p>\n

A array de depend\u00eancia \u00e9 o segundo argumento do hook useEffect<\/code> e \u00e9 usada para especificar as vari\u00e1veis das quais o efeito depende. Isso significa que quando qualquer um dos valores das vari\u00e1veis especificadas na array de depend\u00eancia \u00e9 alterado, o efeito \u00e9 reexecutado.<\/p>\n

Em uma situa\u00e7\u00e3o em que uma vari\u00e1vel da qual o efeito depende n\u00e3o estiver inclu\u00edda na array de depend\u00eancia, o efeito poder\u00e1 n\u00e3o ser reexecutado quando o valor for alterado. Isso pode levar a um comportamento inesperado e a erros em seu aplicativo.<\/p>\n

Esse erro n\u00e3o \u00e9 um erro do React, mas um erro do ESLint. O ESLint<\/a> fornece um plugin espec\u00edfico para o React, que inclui um conjunto de regras criadas para ajudar os desenvolvedores a escrever um c\u00f3digo React melhor. Uma dessas regras \u00e9 a regra \"react-hooks\/exhaustive-deps\"<\/code>, que detecta o erro “React Hook useEffect has a missing dependency”.<\/p>\n

Como exemplo, vamos analisar um componente funcional que tem um estado de contagem. Espera-se que esse componente tamb\u00e9m registre uma mensagem com o valor de count<\/code> no console sempre que ele for alterado:<\/p>\n

import { useState, useEffect } from 'react';\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(`You clicked ${count} times`);\n  }, []);\n\n  return (\n    <div>\n      <h1>Hello World<\/h1>\n      <p>Count: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
No exemplo acima, voc\u00ea tem um componente funcional que usa os hooks useState<\/code> e useEffect<\/code>. O hook useEffect<\/code> \u00e9 usado para registrar em registro uma mensagem com o valor da vari\u00e1vel de estado count<\/code> sempre que ela for alterada.<\/p>\n
No entanto, observe que a vari\u00e1vel count<\/code> n\u00e3o est\u00e1 listada na segunda array de argumentos (array de depend\u00eancia) do hook useEffect<\/code>. Isso acionar\u00e1 o erro “React hook useEffect has a missing dependency”.<\/p>\n
\"Mensagem
Mensagem de erro “React hook useEffect has a missing dependency”.<\/figcaption><\/figure>\n
3 maneiras de corrigir o erro “React hook useEffect has a missing dependency”<\/h2>\n
Esse erro pode ser corrigido de diferentes maneiras, dependendo da abordagem que voc\u00ea deseja usar. Aqui est\u00e3o as v\u00e1rias maneiras.<\/p>\n