1

Estou tendo problemas para utilizar hooks customizados dentro do useEffect, em especial, quando defino dentro do useEffect métodos do hook customizado que alteram o seu estado interno. Diante deste problema me deparei com as seguintes situações.

Modelo utilizado para o exemplo

import React, { useState } from "react";

const useCounter = () => {
  const [count, setCount] = useState<number>(0);
  const methods = {
    increment: () => setCount((prev) => prev + 1),
  };
  return { count, ...methods };
};

const Counter: React.FC = (props) => {
  const { count, increment } = useCounter();
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => increment()}>Increment</button>
    </div>
  );
};
export default Counter;

Supondo que seja necessário executar "increment" logo na montagem do componente. Isso pode ser feito utilizando o useEffect passando um array de dependências vazio.

  useEffect(() => {
    increment();
    console.log("INCREMENT ON MOUNT...");
  }, []);

  

No entanto, executando o código acima é obtido o aviso do esLint que "increment" deve ser adicionado ao array de dependências ou removido do useEffect.

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

Então, faz-se as devidas alterações:

  useEffect(() => {
    increment();
    console.log("LOOPING...");
  }, [increment]);

Agora com "increment" adicionado ao array de dependências do useEffect o aviso do esLint desaparece, porém, a aplicação entra em looping.

Tentativas de solução

Logo de inicio achei que esse problema podia estar relacionado há falta de igualdade referencial entre as funções, já que as mesmas são recriadas a cada render. Por isso, assim que obtive o problema tentei resolve-lo utilizando o useCallback, uma vez que ele fornece uma igualdade referencial da função entre cada render do componente;

  const safeIncrement = useCallback(() => increment(), []);

  useEffect(() => {
    safeIncrement();
    console.log("NO LOOPING...");
  }, [safeIncrement]);

A mudança me retornou um segundo aviso, desta vez solicitando que "increment" fosse passado como dependência do useCallback:

Line 14:56: React Hook useCallback has a missing dependency: 'increment'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Alteração feita, e voa lá, aplicação em looping novamente:

  const safeIncrement = useCallback(() => increment(), [increment]);

  useEffect(() => {
    safeIncrement();
    console.log("LOOPING...");
  }, [safeIncrement]);

Passando o useCallback para o hook customizado

const useCounter = () => {
  const [count, setCount] = useState<number>(0);
  const methods = {
    increment: useCallback(() => setCount((prev) => prev + 1), []),
  };
  return { count, ...methods };
};

Passei então o useCallback para dentro do hook customizado e isso pareceu funcionar, nenhum aviso, nem looping dessa vez... A questão é que não sei se a prática é correta, nunca fiz, nem vi ninguém fazendo, além disso minha abordagem geral pode estar errada. Se alguém poder me passar um feedback a respeito dessa prática desde já lhe agradeço :)

Para conferir a sequência dos Renders(parece estar ocorrendo corretamente):

import React, { useState, useEffect, useCallback } from "react";

const useCounter = () => {
  const [count, setCount] = useState<number>(0);
  const methods = {
    increment: useCallback(() => {
      setCount((prev) => prev + 1);
      console.log("RENDER - INCREMENT");
    }, []),
  };
  return { count, ...methods };
};

const Counter: React.FC = (props) => {
  const { count, increment } = useCounter();

  useEffect(() => {
    console.log("RENDER - APP");
  });

  useEffect(() => {
    increment();
  }, [increment]);

  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => increment()}>Increment</button>
    </div>
  );
};
export default Counter;
0

1 Resposta 1

0

Acho que o seu problema está em:

const useCounter = () => {

  const methods = {    // DESSA MANEIRA
     ...               // ESSA VARIÁVEL VAI SER SEMPRE RECRIADA E 
  };                   // SUA REFERÊNCIA VAI MUDAR A CADA render DE useCounter
};

Não coloque o useCallback dentro do object methods. Não sei se vai funcionar, mas isso vai contra uma das regras dos hooks e não é uma boa prática.

inserir a descrição da imagem aqui

Essa é uma das formas de fazer:

const useCounter = () => {
  const [count,setCount] = React.useState(0);
  
  const increment = React.useCallback(() => setCount((prevState) => prevState + 1),[]);
  
  return ({
    count, increment
  });
  
};

function App() {

  const { count, increment } = useCounter();

  return(
    <React.Fragment>
      <div>Count: {count} </div>
      <button onClick={increment}>Increment</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Se você realmente quiser utilizar um objeto chamado methods, você pode fazer assim:

  • useCallback garante que a referência de increment não muda.
  • useRef garante que a referência de methods não muda.

const useCounter = () => {
  const [count,setCount] = React.useState(0);
  
  const increment = React.useCallback(() => setCount((prevState) => prevState + 1),[]);
  
  const methods = React.useRef({
    increment
  });
 
  return ({
    count, 
    ...methods.current
  });
  
};

function App() {

  const { count, increment } = useCounter();

  return(
    <React.Fragment>
      <div>Count: {count} </div>
      <button onClick={increment}>Increment</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

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 .