React 19: As Principais Novidades e Como Elas Impactam o Desenvolvimento

O React, biblioteca JavaScript para construção de interfaces de usuário, recentemente apresentou uma nova versão: o React 19. Com ela, novas funcionalidades e otimizações que prometem tornar o desenvolvimento ainda mais eficiente e performático. 

O que há de novo no React 19? 

A nova versão do React apresenta uma das atualizações mais ousadas do ecossistema, contando com melhorias na renderização, na experiência do desenvolvedor e na eficiência do código. Com a introdução do React Actions, novas APIs para Suspense, otimizações em Server Components, novos hooks, e suporte aprimorado para streaming, esta versão muda a forma como desenvolvemos aplicações reativas de alto desempenho.

1. React Compiler: Otimização Automática de Código

O React Compiler é uma ferramenta build-time que otimiza automaticamente a reatividade dos componentes, eliminando a necessidade de memorização manual (useMemo, useCallback). Ele analisa o código durante a compilação e aplica otimizações que reduzem re-renderizações desnecessárias, melhorando a performance e otimização da UI. 

Saiba como utilizar o React Compiler, aqui!

2. Server Components

Os Server Components são uma das mais representativas mudanças, permitindo a renderização de componentes antes que a UI seja renderizada. Podem ser executados no momento da compilação ou podem ser executados usando um servidor web para cada solicitação.

A inclusão de server components melhora:

• SEO
• Carregamentos iniciais mais rápidos
• Portabilidade de código ao permitir componentes que podem ser executados no cliente ou servidor. 

2.1 Server Actions

As server actions permitem os componentes client-side chamar funções assíncronas que são executadas no servidor.

As server actions são definidas com a declaração “use server“, isso criará automaticamente uma referência para a função do servidor.

Quando essa função for chamada no client, o React enviará uma solicitação ao servidor para executar a função e retornará o resultado.

Exemplo de uso de Server Actions:

"use server";
export async function saveData(data) {
  await db.insert("users", data);
}

3. Actions: Simplificando a Manipulação de Dados

As Actions permitem a manipulação assíncrona de dados de maneira declarativa e integrada ao fluxo de renderização. 

Benefícios das Actions

• Eliminam a necessidade de gerenciamento manual de estados de carregamento e erro.
• Melhoram a experiência do usuário com atualizações otimistas.
• Integram-se facilmente a Server Components para manipulação eficiente de dados no backend.

4. Novos Hooks para Melhor Controle de Estado

Novos hooks foram introduzidos para que possam aprimorar a experiência do desenvolvedor e reduzem a necessidade de bibliotecas externas para gerenciamento de estado:

useActionState

Criado para lidar com casos utilizando Actions.

• Captura estados de envio de formulários e facilita a manipulação de respostas assíncronas.

Exemplo retirado da documentação:

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

<form>Ações

Foi introduzido um novo recurso para o <form> dando suporte a passar funções através da prop action. Essa prop permite a integração das Actions.

<form action={actionFunction}>

useFormStatus

Criado para dar suporte às Actions em formulários.

• Fornece informações sobre o status de submissão de formulários, útil para desativar botões enquanto a requisição está em andamento.

const {pending} = useFormStatus();
return <button type="submit" disabled={pending} />

Dessa forma, o hook lê o status do <form> e consegue obter as informações referentes ao status do formulário.

useOptimistic

Criado para gerenciamento de atualizações otimistas.

• Implementa atualizações otimistas, permitindo que a interface reflita mudanças antes que a resposta do servidor seja recebida.

Exemplo baseado na documentação oficial:

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

5. Introdução de uma nova API – use

O React 19 apresenta a API use como uma forma de ler recursos em renderização. 

Com use, podemos ler promessas e usar o React Suspender para aguardar a promessa ser resolvida, além de conseguirmos ler contexto com use. A nova API só pode ser utilizada em render, igual fazemos com os hooks, mas uma diferença entre os hooks é que podemos chamar use de forma condicional.

Exemplo retirado da documentação, lendo contexto com use:

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading({children}) {
  if (children == null) {
    return null;
  }
  
  // This would not work with useContext
  // because of the early return.
  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

6. APIs estáticas

Foram adicionadas duas APIs estáticas para a geração de sites estáticos: prerender e prerenderToNodeStream

• Elas melhoraram o renderToString esperando os dados serem carregados para geração de HTML estático.
• Aguardam todos os dados carregarem antes de retornar o fluxo HTML.

Para analisar melhor as novas APIs estáticas, clique aqui.

7. Melhorias

Ref

Com o React 19, é possível acessar ref como uma prop para componentes de função. Isso faz com que o forwadRef deixe de ser utilizado.

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

Context como provedor

Agora com a nova versão do React, podemos usar o Context como um provedor, dessa forma:

const ThemeContext = createContext('');

function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );  
}

Suporte para metadados

Agora com a nova versão é possível renderizar tags de metadados em componentes:

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
       ...
      </p>
    </article>
  );
}

Suporte para folhas de estilo

Além dos metadados, é possível adicionar folhas de estilo nos componentes.

function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
    </div>
  )
}

A propriedade precedence define a prioridade em que essa folha de estilo sera inserida na folha de estilo da DOM, sendo assim, é possível passar o valor “high” para identificar que é uma folha de estilo que deve ter prioridade maior.

Algumas outras melhorias:

• Melhorias nos erros de hidratação
• Funções de limpeza para refs
• useDeferredValue
• Suporte para scripts assíncronos
• Suporte para pré-carregamento de recursos
• Melhor relatório de erros

Conclusão – React 19

A nova versão lançada pelo React, traz várias evoluções no formato em como construir nossos aplicativos web, diversas otimizações que vão contribuir de forma essencial para o desempenho e experiência para o time de desenvolvimento. Pensando em manutenabilidade e escalabilidade tivemos um avanço significativo.