Descobrindo o useCallback do React

Existem vários hooks do React e recentemente estudando achei que esse hook merece uma atenção maior da minha parte.

Mas antes de entrar efetivamente no que seria o useCallback, vamos começar com uma pergunta anterior. O que seria um hook ?

O que é um hook ?

Hooks de forma informal, podemos dizer que seriam os “componentes” das regras de negócio. Quando você precisa executar a mesma lógica em mais de um lugar, você pode isolar essa lógica em um hook e chamar ela em qualquer área do seu sistema. Essa conceito também pode ser extendido aos hooks nativos do React.

Agora que entendemos que hooks são lógicas encapsuladas para serem reutilizadas nós podemos ir para o segundo tópico necessário para entender o useCallback que é o processo de renderização do React.

Como o React.js renderiza os componentes?

O React introduziu de forma muito eficiente o padrão de arquitetura de componentização, onde cada parte da sua interface pode ser isolada e reaproveitada no sistema. Isso facilitou muito a organização e a manutenção de sistemas web, para você renderizar esses componentes eles precisam ser chamados em um componente pai que se comporta como a sua página.

Até o momento esse cenário não é ruim, mas você ainda não consegue resolver o problema de performance pois a cada alteração de estado você precisar atualizar toda a página. E para resolver isso existem outras abordagens dependendo do contexto, mas hoje vamos trazer um destaque para o useCallback.

Enfim, o que o useCallback faz ?

Basicamente ele é um hook que cria um cache da sua função e evita que ela seja recriada sem necessidade pois ela só vai ser executada novamente quando houver uma alteração em uma das dependências (assim como o useEffect faz).

Exemplo com código

Vamos criar um código de contador aonde o usuário pode clicar em um botão para incrementar um valor e também aumentar o valor do intervalo.

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

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent renderizado");
  return (
    <div>
      <button onClick={onIncrement}>Incrementar no Filho</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithoutCallback = () => {
    setCount((prevCount) => prevCount + incrementStep);
  };

  console.log("ParentComponent renderizado");

  return (
    <div>
      <h1>Contador: {count}</h1>

      <h2>Sem useCallback</h2>
      <ChildComponent onIncrement={incrementWithoutCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Aumentar Passo de Incremento
      </button>
    </div>
  );
}

export default ParentComponent;

No exemplo de cima, o componente filho é renderizado a cada alteração que acontece no componente pai

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

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent renderizado");
  return (
    <div>
      <button onClick={onIncrement}>Incrementar no Filho</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithCallback = useCallback(() => {
    setCount((prevCount) => prevCount + incrementStep);
  }, [incrementStep]);

  console.log("ParentComponent renderizado");

  return (
    <div>
      <h1>Contador: {count}</h1>

      <h2>Com useCallback</h2>
      <ChildComponent onIncrement={incrementWithCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Aumentar Passo de Incremento
      </button>
    </div>
  );
}

export default ParentComponent;

Quando usamos o useCallback ele só irá atualizar o componente filho quando a dependência sofrer uma alteração

Espero que esse texto tenha te ajudado a entender melhor como funciona o useCallback.

Oi, meu nome é Marcelle e eu sou desenvolvedora web :)

Eu trabalho com tecnologia desde 2016, mas eu sou apaixonada pelo que faço. Por isso eu estou sempre estudando e compartilhando as minhas anotações de estudo em forma de artigo.

marcellevargas - Overview