Dominando useState, useMemo e useCallback no React

E aí, devs! 🚀
Se você está desenvolvendo com React e quer entender como otimizar o desempenho da sua aplicação, é fundamental conhecer os hooks useState, useMemo e useCallback. Neste post, vamos explorar quando e como usá-los para evitar re-renderizações desnecessárias e tornar seu código mais eficiente.

🟢 useState: Gerenciando Estado

O useState é um dos hooks mais básicos e essenciais do React. Ele permite que seus componentes funcionais tenham estado, possibilitando a atualização de valores ao longo do tempo.

📝 Exemplo de Uso

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={()=> setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

📌 Explicação

• useState retorna um array com dois valores:
  1. O estado atual (contador)
  2. Uma função para atualizar o estado (setContador)
• Quando o botão é pressionado, a função setContador atualiza o estado, forçando a re-renderização do componente.

🔵 useMemo: Evitando Recalcular Valores Pesados

O useMemo é utilizado para memorizar cálculos pesados, evitando que eles sejam reexecutados desnecessariamente.

📝 Exemplo de Uso

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

function ListaFiltrada({ lista }) {
  const [termo, setTermo] = useState('');

  const listaFiltrada = useMemo(() => {
    return lista.filter((item) => item.includes(termo));
  }, [lista, termo]);

  return (
    <div>
      <input
        type="text"
        value={termo}
        onChange={(e)=> setTermo(e.target.value)}
      />
      <ul>
        {listaFiltrada.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

📌 Explicação

• useMemo recebe dois argumentos:
  1. Uma função que retorna um valor memorizado
  2. Um array de dependências
• O cálculo só é refeito se as dependências mudarem, evitando trabalho desnecessário.

🟠 useCallback: Otimizando Funções Passadas como Props

O useCallback é semelhante ao useMemo, mas em vez de memorizar um valor, ele memoriza uma função.

📝 Exemplo de Uso

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

function ComponentePai() {
  const [contador, setContador] = useState(0);

  const incrementar = useCallback(() => {
    setContador((prev) => prev + 1);
  }, []);

  return (
    <div>
      <p>Contador: {contador}</p>
      <ComponenteFilho onClick={incrementar} />
    </div>
  );
}

function ComponenteFilho({ onClick }) {
  console.log('ComponenteFilho re-renderizou');
  return <button onClick={onClick}>Incrementar</button>;
}

📌 Explicação

• useCallback evita que a função incrementar seja recriada a cada renderização.
• Isso impede que o componente filho seja re-renderizado sem necessidade.

📊 Comparação entre os Hooks

🟢 useState

• Uso principal: Gerenciar estado interno de um componente.
• Evita: Não aplicável (é um hook de estado básico).

🔵 useMemo

• Uso principal: Memorizar cálculos pesados para evitar recomputação.
• Evita: Recalcular valores desnecessariamente.

🟠 useCallback

• Uso principal: Memorizar funções passadas como props.
• Evita: Re-renderizações desnecessárias de componentes filhos.

🚀 Conclusão

Dominar esses hooks permite que você escreva código mais eficiente e performático no React. Utilize useState para gerenciar estado, useMemo para evitar cálculos repetitivos e useCallback para otimizar funções passadas como props.

Se tiver dúvidas ou quiser trocar uma ideia, deixe um comentário! 💬

📌 GitHub
📌 LinkedIn