Série React Hooks: useCallback

Olá pessoas, vamos dar continuidade em nossa série onde desventamos todos os hooks padrões do nosso querido React.js.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

• Série React Hooks: useImperativeHandle
• Série React Hooks: useDeferredValue
• Série React Hooks: useMemo
• Série React Hooks: useSyncExternalStore
• Série React Hooks: useRef

Hoje iremos falar sobre o hook useCallback, então, pegue sua bebida favorita, sente-se e vamos começar!

O Conceito do useCallback:

O useCallback é um hook do React que tem como objetivo otimizar o desempenho de componentes funcionais. Ele é um hook que ajuda a otimizar o desempenho dos seus componentes React. Tudo se resume à memoização (não confundir com memorização 😛). A memoização é uma técnica onde você armazena o resultado de uma função para que não tenha que re-computá-la toda vez que ela é chamada com os mesmos argumentos.

useCallback é perfeito para quando você tem uma função que é passada como prop para um componente filho, e você quer evitar re-renderizações desnecessárias. No entanto, nem sempre é necessário. Se a sua função não está causando problemas de desempenho, você pode não precisar do useCallback.

Comparação rasa ou profunda? 🤨

useCallback usa comparação rasa para verificar se as dependências mudaram. Isso significa que ele verifica apenas se as referências às dependências são diferentes, e não se os valores reais dentro dos objetos mudaram. Bora ver um exemplo para compreender melhor:

import React, { useCallback, useState } from 'react';

const ParentComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h1>Contagem: {count}</h1>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

interface ChildProps {
  handleClick: () => void;
}

const ChildComponent: React.FC<ChildProps> = ({ handleClick }) => {
  return (
    <button onClick={handleClick}>Clique Aqui!</button>
  );
};

Neste exemplo, o useCallback é utilizado para envolver a função handleClick dentro do componente "ParentComponent". Não fornecemos nenhuma dependência ao useCallback, o que significa que a função será memoizada e permanecerá a mesma em chamadas subsequentes. Isso é apropriado, pois a função handleClick não possui dependências externas que possam afetar seu comportamento.

Quando é possivel não usar o useCallback:

Embora o useCallback seja uma ferramenta útil para melhorar a performance, nem sempre é necessário utilizá-lo. Em situações em que a função não possui dependências e não é passada como prop para componentes filhos, não há benefício em envolvê-la com o useCallback. Além disso, se a função é recriada em cada renderização, mas não causa problemas de desempenho, também não é necessário utilizar o useCallback.

Bora ver um exemplo:

import React, { useState } from 'react';

const CounterComponent: React.FC = () => {
  const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
};

return (
  <div>
    <h1>Contagem: {count}</h1>
    <button onClick={incrementCount}>Incrementar</button>
  </div>
 );
};

Neste exemplo, a função incrementCount não possui dependências externas e não é passada como prop para nenhum componente filho. Portanto, não há necessidade de envolvê-la com o useCallback. A função é recriada em cada renderização, mas isso não afeta o desempenho do aplicativo.

Uma palavra de cautela

Embora useCallback possa ajudar a otimizar seus componentes, não é uma solução mágica. Ele tem um custo, pois precisa armazenar a função na memória. Portanto, use-o com sabedoria e apenas quando necessário.

Resumindo

O hook useCallback é uma ferramenta poderosa para otimizar a performance de um aplicativo React. Utilizando o conceito de memoização, o useCallback permite armazenar em cache funções e reutilizá-las em chamadas subsequentes, desde que as dependências permaneçam as mesmas. É apropriado utilizar o useCallback quando precisamos passar funções como props para componentes filhos, evitando renderizações desnecessárias. Porém, é importante lembrar que o useCallback não é sempre necessário e deve ser usado com discernimento. Em situações em que a função não possui dependências ou não causa problemas de desempenho, não há necessidade de envolvê-la com o useCallback. Compreender quando utilizar e quando não utilizar o useCallback ajuda a desenvolver aplicativos React mais eficientes e responsivos.