Domine inglês técnico de programação em 2025, seja qual for seu nível. Inscrição gratuita

React 19: Principais mudanças e novidades
Rocketseat

Rocketseat

7 min de leitura
react
Se você está interessado em saber o que há de novo no React 19, chegou ao lugar certo! Esta nova versão vem carregada de funcionalidades e melhorias que vão impactar diretamente a forma como desenvolvemos interfaces e gerenciamos a performance das aplicações. A seguir, vamos explorar as principais novidades e mudanças que o React 19 trouxe.
Se você já usa o React 18, a transição para o React 19 será uma evolução natural e cheia de benefícios. Prepare-se para explorar todas essas novas funcionalidades e elevar a qualidade dos seus projetos de front-end.
O React 19 é a nova grande atualização dessa popular biblioteca de JavaScript, com foco em melhorar a experiência de desenvolvimento, a performance de aplicações e simplificar tarefas complexas. Esta versão traz recursos que foram introduzidos como experimentais no React 18, mas que agora se tornam estáveis, aprimorando ainda mais o desenvolvimento de interfaces modernas e escaláveis.
🔥
Exploraremos as principais novidades que o React 19 apresenta, como server components, novos hooks, melhorias em preloading de recursos e muito mais.

Componentes do Servidor (Server Components)

Uma das maiores inovações do React 19 é a introdução dos Server Components. Com esses componentes, parte do código é renderizado no servidor, o que significa que menos JavaScript é enviado para o navegador. Isso resulta em melhoria de performance e menores tempos de carregamento, especialmente em interfaces complexas.

Benefícios dos Server Components:

  • Menos JavaScript no cliente: Os Server Components enviam apenas HTML estático para o cliente, sem carregar scripts de JavaScript, o que reduz drasticamente o tempo de carregamento inicial.
  • SEO (Search Engine Optimization) aprimorado: Como o conteúdo é renderizado no servidor, motores de busca podem rastrear o conteúdo com mais eficiência, melhorando a otimização para mecanismos de busca (SEO).
  • Melhor desempenho: Interfaces complexas carregam de forma mais rápida e fluida, com menos carga no navegador, especialmente em dispositivos com pouca capacidade de processamento.
Essa abordagem também transforma a forma como lidamos com data fetching e renderização, tornando o React ainda mais eficiente para grandes projetos.

Ações do Servidor (Server Actions)

Server Actions são uma funcionalidade inovadora do React 19, que permite executar ações diretamente no servidor. Com essa abordagem, a lógica do lado do servidor é chamada de forma transparente a partir de componentes do cliente, sem a necessidade de enviar requisições HTTP manuais.
As Server Actions funcionam em conjunto com os Server Components, onde a lógica de negócios pode ser definida diretamente no servidor, usando a diretiva "use server". Quando uma Server Action é invocada de um componente do cliente, o React gerencia automaticamente o envio da solicitação para o servidor, executa a ação e retorna o resultado ao cliente.

Benefícios das Server Actions:

  • Simplificação do fluxo de dados: Você elimina a complexidade de manter estado e gerenciar efeitos no cliente, já que as operações são executadas diretamente no servidor.
  • Maior segurança: As operações sensíveis, como interações com banco de dados, permanecem no servidor, garantindo maior controle sobre os dados.
  • Desempenho aprimorado: A lógica de negócios é executada no servidor, o que pode melhorar o desempenho em dispositivos com recursos limitados ou em redes lentas.
Vamos para o que interessa, certo? Aqui vamos focar em Server Actions, separando a lógica entre dois arquivos: actions.tsx e Form.tsx. Essa separação de responsabilidades ajuda a manter o código mais organizado e facilita a compreensão do fluxo de dados entre o cliente e o servidor.

Ações do Servidor em actions

No arquivo actions.tsx, lidamos com a lógica que será executada no servidor, ou seja, os dados do formulário são enviados ao servidor para processamento. Vamos usar o exemplo de um formulário que registra o nome do usuário.
Aqui, a função registerUser recebe os dados do formulário através do FormData e os valida usando zod. Caso o nome enviado seja muito curto, um erro será retornado. Se a validação passar, a função simula um delay antes de retornar uma saudação com o nome.
Esse é o papel essencial das Server Actions: processar a lógica sensível no lado do servidor, garantindo que o cliente não precise lidar diretamente com essa lógica.
Se você quiser saber mais sobre criação e validações de formulário utilizando zod recomento a leitura desse artigo: React Hook Form: a melhor forma de criar formulários no React

Manipulação de Formulários em RegisterForm

Agora, no arquivo RegisterForm.tsx, o foco é capturar a ação do formulário e conectar essa lógica à ação do servidor. Aqui entra o novo hook useActionState, que permite monitorar o estado da ação enquanto ela está sendo processada.
Aqui estamos usando o hook useActionState, que controla três coisas:
  1. result: o resultado da ação (seja um erro ou uma saudação).
  1. handleRegisterUser: a função que dispara a ação do servidor.
  1. isPending: um booleano que indica se a ação está em execução, utilizado para desabilitar o botão de envio e exibir uma mensagem de carregamento.
A introdução das Server Actions no React 19 permite formular fluxos de trabalho mais simples e seguros, reduzindo a complexidade de lidar com requisições no cliente. Quer saber como isso pode otimizar seu código? Bora para prática!
Video preview
Para melhorar ainda mais o gerenciamento de estado e formulários, o React 19 introduz outros novos hooks além do useActionState, o qual vimos no exemplo anterior, que prometem facilitar o desenvolvimento e melhorar a user experience:
  • useFormStatus: Garante que o status da última submissão do formulário seja acessível de maneira simples, melhorando o feedback para o usuário durante as interações.
  • useOptimistic: Atualiza a UI de forma otimista, ou seja, antes que a ação no servidor seja concluída, oferecendo uma experiência mais fluida e interativa para o usuário.

Exemplo do useFormStatus:

 
Com o useFormStatus, você pode desabilitar o botão de envio enquanto o formulário está sendo submetido, oferecendo uma interface mais fluida e intuitiva.

Exemplo do useOptimistic:

Com o useOptimistic, você pode atualizar a interface instantaneamente antes que o servidor confirme a ação, garantindo uma experiência mais rápida e fluida para o usuário.

API use: simplificando o data fetching

O React 19 introduz uma nova API chamada use, que funciona como um await para promises diretamente nos componentes. Agora, você pode suspender a renderização de um componente até que os dados necessários sejam carregados.
Suponha que você tenha uma aplicação React que precise buscar e exibir dados de uma API externa.

Exemplo da API use:

API use melhora a forma como lidamos com data fetching e oferece uma abordagem mais intuitiva para trabalhar com promises em componentes.

Preloading de recursos: otimização de performance

O React 19 introduz APIs que permitem o preloading de recursos essenciais, como scripts e fontes, para garantir que eles estejam prontos antes de serem usados. Entre essas APIs estão:
  • preload: Pré-carrega recursos como scripts e estilos.
  • preinit: Inicializa módulos previamente para que estejam prontos para uso.
  • prefetchDNS e preconnect: Otimiza a conexão e o carregamento de recursos externos.
Essas melhorias garantem uma aplicação mais rápida e responsiva, especialmente em páginas que dependem de múltiplos recursos externos.

Melhorias no uso da ref prop

Uma das mudanças mais aguardadas no React 19 é a melhoria no uso da ref prop. Para quem está começando com o React, refs são uma maneira de acessar diretamente elementos do DOM ou instâncias de componentes, sem passar pelos métodos tradicionais de renderização. Eles são úteis em diversas situações, como manipulação de foco, animações e integração com bibliotecas de terceiros.

O que são refs?

Em React, refs são referências diretas a elementos DOM ou componentes. Elas permitem que você interaja com esses elementos fora do fluxo típico de renderização controlado pelo React. Por exemplo, você pode usar uma ref para focar um input, iniciar uma animação ou até mesmo armazenar o estado de um componente externo.

Antes do React 19: Complexidade com forwardRef

Anteriormente, para compartilhar uma ref entre componentes filhos e garantir que o elemento correto fosse acessado, os desenvolvedores precisavam usar o forwardRef, uma função que permite passar refs por componentes. Isso, embora funcional, gerava certa complexidade, especialmente em projetos grandes, onde as refs precisam ser compartilhadas em vários níveis da hierarquia de componentes.

Novidades no React 19: Simplificação e previsibilidade

Com o React 19, o processo de trabalhar com refs foi simplificado. Agora, o React lida com a ref prop de maneira mais previsível, eliminando a necessidade de forwardRef em muitos casos. Isso torna o código mais limpo e fácil de manter, especialmente em aplicações com muitas camadas de componentes.

Exemplo prático de uso de refs no React 19:

Neste exemplo, a ref inputRef está sendo usada para focar diretamente no campo de texto quando o botão é clicado. A grande vantagem do React 19 é que essa interação é mais fluida e a necessidade de manipulações complexas, como o forwardRef, foi reduzida.

Está gostando do conteúdo?

O React 19 está mais acessível para iniciantes do que nunca, e nesse vídeo, sobre a release candidate mostramos por que essa versão é uma das mais amigáveis já lançadas. Quer conferir tudo isso na prática?
Video preview

Conclusão: como o React 19 vai impactar o mercado

O React 19 traz avanços que revolucionam a forma de construir interfaces modernas, oferecendo mais controle sobre o servidor, maior performance, e uma abordagem mais simples para lidar com data fetching e interações. Com server components, server actions e novos hooks, desenvolvedores agora têm à disposição ferramentas poderosas para criar aplicações rápidas, interativas e otimizadas.
🚀 Está pronto para se destacar como desenvolvedor React? Nossa formação em React é constantemente atualizada para te manter por dentro das últimas novidades! Ser um desenvolvedor de sucesso exige estar sempre atualizado, e nós da Rocketseat estamos aqui para te guiar nessa jornada.
💡 Com uma abordagem prática e focada nos desafios do mundo real, você vai aprender a dominar as ferramentas e técnicas que o mercado exige. Não importa se você está começando ou já tem experiência, nossa formação vai te deixar preparado para resolver problemas reais e se destacar em qualquer projeto
🤟
Manter-se atualizado é pré-requisito para ser um desenvolvedor de ponta, e a Rocketseat pode te ajudar a chegar lá! Vem com a gente 🚀

Aprenda programação do zero e DE GRAÇA

No Discover você vai descomplicar a programação, aprender a criar seu primeiro site com a mão na massa e iniciar sua transição de carreira.

COMECE A ESTUDAR AGORA