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;