DEV Community

Taise Soares
Taise Soares

Posted on • Edited on

Série React Hooks: useCallback

hooks reactjs

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:

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>
  );
};

Enter fullscreen mode Exit fullscreen mode

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>
 );
};
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

The discussion has been locked. New comments can't be added.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more