React Hook useEffect has a missing dependency

Question

I am having this problem to build my app. Anyone knows what is wrong?

React Hook useEffect has a missing dependency: 'conectar'. Either include it or remove the dependency array react-hooks/exhaustive-deps

const GraficoEquivalenteNovo = props => {
  const [equivalenteNovos, setEquivalenteNovos] = useState([]);
  const [data, setData] = useState([]);
  async function conectar() {
    const resposta = await ConexaoGraficoEquivalenteNovo(props);
    setEquivalenteNovos(resposta[0]);
    setData(resposta[1]);
  }
  useEffect(() => {
    conectar();
  }, [props]);

  return (....)
};

Avin Kavish Avin Kavish · Accepted Answer · 2019-06-10T14:11:22

Your hook depends on the function connectar which is declared outside the hook, but is internal to the render process. It is re-manufactured on every render. Therefore, React sees it as a volatile dependency. You could have the function outside your component but since the function itself uses state hooks and depends on props, move it into the effect hook.

useEffect(() => {
   async function conectar() { 
    const resposta = await ConexaoGraficoEquivalenteNovo(props); 
    setEquivalenteNovos(resposta[0]);
    setData(resposta[1]);
  } 

  conectar();
}, [props]);

React Hook useEffect has a missing dependency

1 Answers