Hooks no React 19 — impulsione a performance e a interatividade

Garanta sua assinatura com até 35%OFF antes do reajuste. Quero aproveitar

Rocketseat

3 min de leitura

Navegação Rápida:

As inovações e a automatização da memoização

use() para lidar com promessas

Diretivas

useOptimistic: atualizações em tempo real

O React 19 trouxe novos hooks e aprimorou alguns recursos para tornar o desenvolvimento mais simples e poderoso. Seja para lidar com dados assíncronos, formular updates otimistas ou mesmo separar responsabilidades entre client e server, os hooks são hoje parte fundamental da experiência moderna no React.

📄

Ainda não conferiu todas as mudanças do React 19? Veja nosso artigo com um overview completo: React 19: Principais Mudanças e Novidades.

Neste artigo, vamos abordar como a automatização da memoização, o use(), o useOptimistic e até mesmo as novas diretivas use client e use server podem mudar o seu fluxo de desenvolvimento. Preparado? Vamos lá!

As inovações e a automatização da memoização

Antes do React 19, era preciso usar useMemo e useCallback para evitar renderizações desnecessárias. Agora, algumas partes desse processo estão sendo simplificadas e, no futuro, poderão ser automatizadas pelo React Compiler.

🚀

Quer saber mais sobre o React Compiler? Confira nosso artigo sobre performance no React.

Por que a memoização é importante?

Sempre que você tem cálculos caros — listas extensas, operações matemáticas complexas ou mesmo chamadas de API —, a renderização repetida pode impactar diretamente o desempenho. A memoização evita que o componente seja recalculado sem necessidade, economizando recursos.

Como o React automatiza a memoização?

A ideia é que o compilador (ferramenta futura) identifique pontos de alto custo e aplique memoização sem necessidade de intervenção manual. No React atual, entretanto, você ainda se beneficia de:


// Exemplo com useMemo
import { useMemo } from 'react';

function ExpensiveComponent({ input }) {
  const calculatedValue = useMemo(() => expensiveCalculation(input), [input]);
  return <div>{calculatedValue}</div>;
}


// Conceito de automação futura
function ExpensiveComponent({ input }) {
  const calculatedValue = expensiveCalculation(input);
  return <div>{calculatedValue}</div>;
}

Menos boilerplate: o código tende a ficar mais enxuto.

Automação confiável: quando o React Compiler estiver estável, haverá menos risco de esquecer dependências ou criar bugs de performance.

Hooks que impulsionam a performance

Além das melhorias gerais no ecossistema, o React 19 ganhou hooks que simplificam a vida do desenvolvedor. Dois destaques são:

use() — para renderização assíncrona

useOptimistic — para updates otimistas

use() para lidar com promessas

use() é um game-changer na forma de buscar dados. Em vez de usar useEffect e gerenciar estados para requisições, você pode simplesmente usar use() diretamente:


import { use, Suspense } from 'react';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

function DataComponent() {
  const data = use(fetchData()); // Suspende até a promise ser resolvida
  return <div>{data.message}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Carregando...</div>}>
      <DataComponent />
    </Suspense>
  );
}

Menos estado intermediário: você não precisa mais ter variáveis de “carregando” e “erro” separadas.

Melhor integração com Suspense: o React suspende a renderização até ter os dados, exibindo o fallback no meio tempo.

Por que o Suspense é fundamental?

Quando um componente “suspende”, o React precisa saber o que exibir como fallback. O Suspense age como um “limite” para capturar essa suspensão e mostrar algo ao usuário enquanto a promise não é resolvida.

Diretivas `use client` e `use server`

Outra novidade associada a arquiteturas mais recentes (Server Components) são as diretivas use client e use server. Elas ajudam a separar o que roda no cliente do que fica exclusivamente no servidor.

use client: indica que o componente (e seus filhos importados) devem ser executados somente no cliente. Útil para interações que requerem DOM ou APIs de navegador.

use server: indica que o componente é processado apenas no servidor. Lógica confidencial, acesso a banco de dados ou manipulações de arquivos são exemplos típicos.


// server-actions.js
'use server';

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

// ClientComponent.js
'use client';
import { useState, useEffect } from 'react';
import { fetchData } from './server-actions';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function getData() {
      const result = await fetchData();
      setData(result);
    }
    getData();
  }, []);

  return <div>{data ? data.message : 'Carregando...'}</div>;
}

Performance: Menos código no cliente, maior velocidade de carregamento.

Segurança: Lógica sensível fica no servidor, reduzindo exposição de dados.

useOptimistic: atualizações em tempo real

O useOptimistic foi introduzido para deixar a aplicação ainda mais responsiva, atualizando a interface de forma imediata — mesmo antes de o servidor confirmar a mudança.


'use client';

import { useOptimistic, useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  // Estado otimista que atualiza instantaneamente
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (currentState, increment) => currentState + increment
  );

  const handleLike = async () => {
    // Atualiza instantaneamente no front
    setOptimisticLikes(1);

    try {
      const response = await fetch('/api/like', { method: 'POST' });
      const result = await response.json();

      // Atualiza o estado real com o retorno do servidor
      setLikes(result.likes);
    } catch (error) {
      console.error('Falha ao registrar o like:', error);
      // Se deu erro, reverte a atualização otimista
      setOptimisticLikes(-1);
    }
  };

  return <button onClick={handleLike}>Curtidas: {optimisticLikes}</button>;
}

export default LikeButton;

Resposta imediata: o usuário percebe a ação no mesmo instante.

Melhor usabilidade: casos como “like”, comentários ou formulários se tornam muito mais fluidos.

Formulários mais rápidos com Actions e useFormStatus

Os formulários são parte fundamental de qualquer app web. O React 19 trouxe as Actions — que rodam direto no servidor — e o hook useFormStatus, que facilita o feedback ao usuário durante o envio.

Actions


// actions.js
'use server';

export async function registerUser(data) {
  const response = await fetch('/api/register', {
    method: 'POST',
    body: JSON.stringify(data),
  });
  return await response.json();
}


// RegisterForm.js
'use client';

import { registerUser } from './actions';

export function RegisterForm() {
  return (
    <form action={registerUser}>
      <input type="text" name="username" placeholder="Nome de usuário" />
      <button type="submit">Registrar</button>
    </form>
  );
}

Fluxo simplificado: a lógica de submissão acontece no servidor, reduzindo complexidade no cliente.

Segurança: dados sensíveis não ficam expostos em camadas do front.

useFormStatus


import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Enviando...' : 'Enviar'}
    </button>
  );
}

Feedback instantâneo: informe ao usuário quando o envio está em andamento, sem precisar criar estados manuais.

Maior controle: combine com CSS ou animações para proporcionar feedback visual mais rico.

Conclusão: domine o futuro do desenvolvimento com React

Os hooks e novas diretivas do React 19 representam um salto na forma como construímos aplicações. Renderização assíncrona mais simples, atualizações otimistas, formulários que rodam diretamente no servidor — tudo isso se traduz em mais desempenho e menos boilerplate.

🚀

Quer se aprofundar nessas novidades e virar um especialista em React?

Conheça a Formação em React da Rocketseat: