Tendências do React em 2025

 (robinwieruch.de)
16 pontos por xguru 2025-03-24 | 1 comentários | Compartilhar no WhatsApp
  • O React está evoluindo para um framework full-stack que elimina a fronteira entre cliente e servidor
  • A posição dominante do Next.js está enfraquecendo, enquanto TanStack Start e React Router surgem como concorrentes
  • O React está fortalecendo recursos como formulários, gerenciamento de estado, componentes de servidor e adoção de IA
  • Os desenvolvedores React precisarão se familiarizar cada vez mais com ambientes full-stack

React Server Components (RSC)

  • React Server Components (RSC) é um recurso que reduz o tamanho do bundle JavaScript no cliente e otimiza o desempenho
    • Primeiro anúncio: 21 de dezembro de 2020
    • Primeira implementação: introdução do App Router no Next.js 13 (2022)
    • O Next.js 15 (2024) alcançou um estado mais estável
    • Espera-se que React Router e TanStack Start também adotem RSC em breve
  • Como o RSC funciona
    • É executado uma vez no servidor, e apenas o resultado renderizado é enviado ao cliente
    • Reduz a quantidade de JavaScript no cliente
    • Permite acesso a banco de dados e APIs no servidor (mais segurança)

React Server Functions (RSF)

  • React Server Actions (RSA) → uma evolução do RSC, permitindo modificar e atualizar dados no servidor
    • Executa funções de servidor no estilo de chamada de procedimento remoto (RPC), sem definir rotas de API
    • Usa a diretiva use server
  • React Server Functions (RSF)
    • Em setembro de 2024, a equipe do React apresentou o RSF como um conceito mais abrangente que inclui o RSA
    • Pode funcionar tanto em RSC quanto em componentes de cliente
    • Inclui operações de leitura e modificação de dados
  • Implementação prevista em Next.js, TanStack Start e React Router

Melhorias nos formulários do React

  • No React 19, os recursos relacionados a formulários foram bastante aprimorados
    • É possível chamar diretamente server actions pelo atributo action de <form>
    • Novos hooks adicionados
      • useFormStatus, useOptimistic, useActionState
    • Melhorias no gerenciamento de estados complexos de formulário
  • Compatível com bibliotecas existentes
    • Bibliotecas já consolidadas, como React Hook Form, continuam podendo ser usadas
    • O próprio processamento de formulários do React ficou mais poderoso e flexível

Library vs Framework (biblioteca vs framework)

  • O React agora vai além de uma simples biblioteca e assume características de framework
    • Suporte a client-side rendering (CSR), server-side rendering (SSR), static site generation (SSG) e incremental static regeneration (ISR)
    • É necessário usar um framework específico (por exemplo, Next.js) para utilizar recursos como RSC e RSF
  • É preciso escolher de acordo com os requisitos do projeto
    • App cliente simples → é possível usar apenas React
    • Necessidade de recursos no servidor → é preciso um framework como Next.js, TanStack Start ou React Router

A concorrência entre frameworks React está aumentando

  • Next.js ainda é o framework mais popular
  • TanStack Start e React Router têm grande chance de surgir como concorrentes em 2025
    • TanStack Start → novo framework baseado em TanStack Router
    • React Router → uma evolução do Remix, com características mais fortes de framework
  • Os dois frameworks devem oferecer suporte a RSC e RSF

Full-Stack React

  • A adoção de recursos centrados no servidor no React → o está levando rumo a uma aplicação full-stack
    • Acesso a banco de dados por meio de RSC e RSF
    • Necessidade de infraestrutura de backend, como autenticação, autorização e cache
    • A comunicação entre cliente e servidor também fica mais simples
  • Aumenta a possibilidade de construir aplicações de IA com base em React

A "shadcnificação" do React

  • Shadcn UI → está se consolidando como a biblioteca de UI padrão do React, de forma parecida com o Tailwind CSS
    • Oferece componentes com estilos pré-definidos
    • Permite personalização
  • Pode surgir uma nova abordagem de UI
    • Hoje, muitos projetos acabam ficando com aparência semelhante

React e IA

  • Aumento na geração de código React com IA
    • Ferramentas de IA (como v0) geram código React automaticamente
  • Aumento na construção de aplicações com suporte de IA
    • Suporte de ferramentas como AI SDK da Vercel e LangChain

Biome (antigo Rome)

  • Resolve problemas de integração entre ESLint e Prettier
  • Ferramenta rápida e consistente baseada em Rust
    • Ganhou o prêmio de US$ 20.000 do Prettier (2023)
  • O Biome → tem grande chance de se consolidar como o toolchain de próxima geração para React

React Compiler

  • React Compiler → ferramenta para automatizar otimização de desempenho
    • Processa automaticamente useCallback, useMemo e memo
    • Elimina a necessidade de memoização manual
    • Versão beta disponível no React 19

Leituras relacionadas