A única coisa que ambos os hooks possuem em comum é de que retornam algo memoizado. Apesar disso ser o suficiente para confundir a funcionalidade de ambos, ao longo da resposta ficará bem claro quais são as diferenças.
useCallback
const callbackMemoizado = useCallback(
() => {
// callback
},
[/* array de dependências */],
);
O useCallback
retorna um callback memoizado. O que isso significa?
A cada renderização do seu componente, todo o código que está nele é executado novamente. Portanto, as funções são re-declaradas, e uma nova referência (na memória) é alocada para cada função. O useCallback
faz com que sua função seja redefinida apenas quando necessário, assim mantendo a mesma referência.
O array de dependências é o responsável por definir se o callback será redefinido ou não. Caso haja uma mudança em alguma das dependências, será redefinido. Veja o exemplo abaixo:
function App() {
const [contador, setContador] = React.useState(0);
const callbackAtualizado = React.useCallback(() => {
console.log('callbackAtualizado:', contador);
}, [contador]);
const callbackNaoAtualizado = React.useCallback(() => {
console.log('callbackNaoAtualizado:', contador);
}, []);
function incrementar() {
setContador(contador + 1);
}
return (
<div>
<p>contador: {contador}</p>
<button onClick={incrementar}>Incrementar</button>
<button onClick={callbackAtualizado}>callbackAtualizado</button>
<button onClick={callbackNaoAtualizado}>callbackNaoAtualizado</button>
</div>
);
}
ReactDOM.render(<App /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Neste exemplo, para que o callbackAtualizado
consiga exibir o novo valor do estado contador
, foi preciso criar uma nova referência sempre que esse estado foi atualizado, já que está no array de dependências.
Enquanto isso, a referência do callbackNaoAtualizado
nunca foi modificada, por isso ele sempre exibe o estado do primeiro render, que é 0
.
Observação sobre o array de dependências
O exemplo acima foi feito com o objetivo de demonstração. Você deve evitar utilizar variáveis (ou funções) externas ao useCallback
sem colocá-las no array de dependências. Se está fazendo isso, provavelmente sua aplicação está com algum problema de lógica.
Existe um plugin do ESLint chamado eslint-plugin-react-hooks
que possui uma regra para validar o array de dependências. Essa regra apontaria um problema no callbackNaoAtualizado
:
React Hook useCallback
has a missing dependency: 'contador'. Either include it or remove the dependency array.
Em outras palavras, "O React Hook useCallback
tem uma dependência faltando: 'contador'. Inclua-a ou remova o array de dependências.".
Caso utilizássemos uma função externa chamada funcao
sem adicionar no array de dependências, a mensagem seria:
React Hook useCallback
has a missing dependency: 'funcao'. Either include it or remove the dependency array. If 'funcao' changes too often, find the parent component that defines it and wrap that definition in useCallback
.
"O React Hook useCallback
tem uma dependência faltando: 'funcao'. Inclua-a ou remova o array de dependências. Se 'funcao' muda com muita frequência, encontre o componente pai que o define e envolva essa definição em um useCallback
."
useMemo
const valorMemoizado = useMemo(
() => {
return; /* retorne algo a ser armazenado em `valorMemoizado` */
},
[/* array de dependências */],
);
O useMemo
retorna um valor memoizado. Como isso se difere do useCallback
?
O useMemo
é executado durante a renderização. Ele não é uma função a ser chamada, mas sim o retorno da função passada para o useMemo
.
Enquanto o useCallback
é utilizado para manter a referência da função passada, o useMemo
deve ser utilizado para cálculos caros, e não para guardar a referência de um objeto, por exemplo.
O useMemo
recalculará o valor memoizado apenas quando uma das dependências forem modificadas, segue o mesmo raciocínio explicado para o useCallback
.
Utilize o useMemo
para a otimização de desempenho da sua aplicação, não como uma garantia semântica. No futuro, o React pode escolher "esquecer" algum valor memoizado e recalculá-lo na próxima renderização para, por exemplo, liberar memória de componentes que não estão em tela no momento.
Segue um exemplo abaixo:
function expensiveCalc(max) {
const start = Date.now();
let counter = 0;
while (Date.now()-start < max) counter++;
return counter;
}
function App() {
const [contador, setContador] = React.useState(2000);
const [horario, setHorario] = React.useState(new Date());
React.useEffect(() => {
// useEffect apenas para forçar uma re-renderização a cada segundo
const id = setInterval(() => {
setHorario(oldHorario =>
new Date(oldHorario.getTime() + 1000)
);
}, 1000);
return () => clearInterval(id);
}, []);
const calculoMemoizado = React.useMemo(() => {
console.log(`Calculo realizado para`, contador);
return expensiveCalc(contador);
}, [contador]);
const calculoNaoAtualizado = React.useMemo(() => {
console.log(`Calculo nao atualizado realizado para`, contador);
return expensiveCalc(contador);
}, []);
function incrementar() {
setContador(contador + 1);
}
return (
<div>
<p>{horario.toLocaleString('pt-BR')}</p>
<p>contador: {contador}</p>
<p>calculoMemoizado: {calculoMemoizado}</p>
<p>calculoNaoAtualizado: {calculoNaoAtualizado}</p>
<button onClick={incrementar}>Incrementar</button>
</div>
);
}
ReactDOM.render(<App /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Adicionei o horário atual com useEffect
no exemplo acima apenas para ficar mais visível o congelamento da interface enquanto o "cálculo caro" está sendo realizado, e também para mostrar que o useMemo
não é recalculado a qualquer atualização de estado.
A função expensiveCalc
não realiza nada demais, apenas um cálculo caro para exemplificação. Obtive ela nesse artigo.