javascriptreactjsreact-hooksreact-custom-hooks

react hook causes infinite loop


I am new in react and I don't know what happens when i try fetch cause infinite loop

const useDadosSolicitacao = (idSolicitacao: number) => {
  const [dadosSolicitacaoDevolucaoAmostra, setDadosSolicitacaoDevolucaoAmostra] = useState<IDadosSolicitacaoAmostra>();
  console.log('test');

  const obterDadosSolicitacao = async () => {
    return await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(1)
      .then((resposta) => {
        setDadosSolicitacaoDevolucaoAmostra(resposta.data);
      })
      .catch((error) => {
        if (error.response) {
          if (error.response.status === 404) {
            return null;
          }
          return { mensagem: error.response.message };
        }
      });
  };
  obterDadosSolicitacao();

this function (obterDadosSolicitacao) generates an infinite loop. But when I don't use response, nothing happens... like it:

const obterDadosSolicitacao = async () => {
    return await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(1);
}
obterDadosSolicitacao()

Solution

  • const useDadosSolicitacao = (idSolicitacao: number) => {
      const [dadosSolicitacaoDevolucaoAmostra, setDadosSolicitacaoDevolucaoAmostra] = useState<IDadosSolicitacaoAmostra>();
      console.log('test');
    
      const obterDadosSolicitacao = async () => {
        return await DadosSolicitacaoService.obterDadosSolicitacaoDevolucao(1)
          .then((resposta) => {
            setDadosSolicitacaoDevolucaoAmostra(resposta.data);
          })
          .catch((error) => {
            if (error.response) {
              if (error.response.status === 404) {
                return null;
              }
              return { mensagem: error.response.message };
            }
          });
      };
      // call it only once
      useEffect(() => {
        obterDadosSolicitacao();
      }, [])