Novos Recursos no React 19 – Atualizações com Exemplos de Código

O ReactJS é uma das bibliotecas de interface de usuário mais populares no desenvolvimento front-end. O amor por React vem não só da equipe dedicada por trás dele, mas também do entusiasmo vibrante da comunidade.

Sempre atentos às solicitações por novas funcionalidades e melhorias, a equipe do React se mantém receptiva ao feedback da comunidade.

O futuro do React promete ser tanto empolgante quanto inovador. Em essência, o lema "Escreva Menos, Faça Mais" define bem essa trajetória.

Neste artigo, vou apresentar as novidades do React 19, permitindo que você explore novos recursos e entenda as mudanças em curso.

Tenha em mente qu, no momento em que este artigo é escrito, o React 19 ainda está em desenvolvimento. É importante acompanhar o guia oficial no GitHub e seguir a equipe nas redes sociais para as últimas atualizações.

🆕 Novos Recursos no React v19 – Visão Geral

Aqui está uma rápida visão geral dos novos recursos que o React 19 terá:

🧠 React Compiler

O React estará utilizando um compilador chamado React Forget. Atualmente, o Instagram já está aproveitando essa tecnologia.

💻 Server components:

O React introduziu o conceito de server components após anos de desenvolvimento. Você agora poderá usar esse recurso com Next.js.

💪 Actions:

Actions também revolucionarão como interagimos com elementos DOM.

📄 Document Metadata:

Outra melhoria muito necessária está no horizonte, capacitando desenvolvedores a realizar mais com menos código.

⏳ Assets Loading:

Isso permitirá que os ativos sejam carregados em segundo plano, o que melhorará tanto o tempo de carregamento da aplicação quanto a experiência do usuário.

🧩 Web components:

Isso é particularmente fascinante: o código React agora nos permitirá incorporar Web components.

🪝 Novos Hooks do React:

Embora não introduza novos hooks essenciais, React 19 melhora os existentes, como useMemo e useCallback, para reduzir re-renderizações desnecessárias e oferecer um controle mais fino sobre a execução de código.

O React 19 está pronto para enfrentar um dos desafios de longa data do React: o problema de re-renderização excessiva. Os desenvolvedores historicamente gastaram inúmeras horas abordando esse problema, que muitas vezes leva a problemas de desempenho.

A caça constante por código causando re-renderização e os subsequentes esforços de otimização têm sido uma tarefa recorrente para os engenheiros. Mas com o React 19, essa preocupação será aliviada. O framework lidará automaticamente com a re-renderização, simplificando o processo de desenvolvimento.

Anteriormente, os desenvolvedores contavam com técnicas como useMemo(), useCallback(), memo, e assim por diante, para gerenciar a re-renderização. Mas com o React 19, tais intervenções manuais não serão mais necessárias.

O framework identificará e memorizará o código automaticamente, resultando em código mais limpo e eficiente.

1. 🧠 React Compiler 🧠

Atualmente, o React não re-renderiza automaticamente na mudança de estado. Uma maneira de otimizar essas re-renderizações é usar manualmente as APIs useMemo(), useCallback(), e memo. De acordo com a equipe do React, isso foi um "compromisso manual razoável". Sua visão era deixar o React gerenciar essas re-renderizações.

Mas a equipe do React percebeu que a otimização manual é trabalhosa, e o feedback da comunidade incentivou a equipe do React a resolver essa questão.

E assim, a equipe do React criou o "compilador React". O compilador React agora gerenciará essas re-renderizações. O React decidirá automaticamente como e quando mudar o estado e atualizar a UI.

Com isso, nós desenvolvedores não precisamos mais fazer isso manualmente. Isso também significa que não há necessidade de usar useMemo(), useCallback(), e memo.

O nome do compilador React é "React Forget".

A partir da

v19, o React passará a usar o compilador React. Como resultado, o React decidirá quais componentes otimizar e quando, junto com o que re-renderizar.

2. 💻 Server components 💻

Se você ainda não está por dentro dos server components do React e Next.js, está perdendo um dos avanços mais significativos nessas tecnologias.

Até o momento, componentes do React funcionavam principalmente no lado do cliente. No entanto, o React introduziu o conceito revolucionário de executar componentes no lado do servidor.

A ideia de server components já circula há anos, com o Next.js sendo um dos pioneiros na sua implementação em produção. A partir do Next.js 13, todos os componentes são server components por padrão. Para executar um componente no lado do cliente, você precisa usar a diretiva "use client".

No React 19, os server components serão integrados diretamente ao React, trazendo várias vantagens:

• SEO: Componentes renderizados no servidor melhoram o SEO, tornando o conteúdo mais acessível aos mecanismos de busca.
• Aumento de Performance: Os server components contribuem para um carregamento inicial mais rápido e um melhor desempenho geral, especialmente em aplicações ricas em conteúdo.
• Execução no Servidor: Facilitam a execução de tarefas no servidor, como chamadas de API, de maneira eficiente e integrada.

Essas vantagens reforçam o potencial transformador dos server components no desenvolvimento web atual.

Por padrão, todos os componentes no React são do lado do cliente. A utilização de 'use server' transforma um componente em server component.

Veja o exemplo de código em React, que será executado no servidor:

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  if (canRequest(username)) {
    // ...
    return 'successful';
  }
  return 'failed';
}

Na seção sobre Actions, você aprenderá mais sobre como utilizar os server components.

Atualmente, o Next.js possui suporte a server components. Com o React 19, esse suporte será diretamente integrado ao React.

3. 💪 Actions 💪

Na versão 19, uma adição empolgante serão as Actions. Isso vai mudar completamente a forma como trabalhamos com formulários.

As Actions permitirão que você integre ações com a tag HTML <form/>. Em termos mais simples, você poderá substituir o evento onSubmit por Ações.

Antes das Actions:

No trecho de código abaixo, utilizamos o evento onSubmit do React, que aciona a execução do método search ao enviar o formulário. No entanto, é importante destacar que, atualmente, o método search funciona apenas no lado do cliente. Estamos limitados ao uso de eventos do React para a submissão de formulários, o que significa que a busca não pode ser executada no lado do servidor.

<form onSubmit={search}>
  <input name="query" />
  <button type="submit">Buscar</button>
</form>

Após as Actions:

Com a introdução dos server components, as Actions podem ser executadas no lado do servidor. Em nosso JSX, com <form/>, podemos eliminar o evento onSubmit e usar o atributo action. O valor do atributo action será um método para submeter os dados, seja no lado do cliente ou no servidor.

As actions permitem executar operações síncronas e assíncronas, simplificando o gerenciamento de submissão de dados e atualizações de estado. O objetivo é facilitar o trabalho com formulários e o manuseio de dados.

Veja um exemplo para entender como isso funciona:

"use server"

const submitData = async (userData) => {
    const newUser = {
        username: userData.get('username'),
        email: userData.get('email')
    }
    console.log(newUser)
}
const Form = () => {
    return (
      <form action={submitData}>
          <div>
              <label>Nome</label>
              <input type="text" name='username'/>
          </div>
          <div>
              <label>Email</label>
              <input type="text" name="email" />
          </div>
          <button type='submit'>Enviar</button>
      </form>
    );
}

export default Form;

No código acima, submitData é a action no componente de servidor. Form é um componente do lado do cliente que utiliza submitData como action. submitData será executado no servidor. A comunicação entre o cliente (Form) e o servidor (submitData) só é possível por causa do atributo action.

Podemos usar o formulário e a action para gerenciar a submissão de dados tanto no lado do cliente quanto no servidor.

Na seção sobre Hooks Aprimorados, você aprenderá três novos hooks que também vão aprimorar a forma como você trabalha com formulários.

4. 🧩 Web components 🧩

A pouco tempo, mergulhei no mundo dos web components e, desde então, fiquei fascinado pelo seu potencial. Se você não está familiarizado com web components, vou explicá-los brevemente:

Web components permitem criar componentes personalizados usando HTML, CSS e JavaScript nativos, integrando-os sem esforço às suas aplicações web como se fossem tags HTML padrão. Incrível, né?

Atualmente, integrar web components ao React não é tão direto. Geralmente, é necessário converter o web component para um componente React ou instalar pacotes extras e escrever código adicional para fazer os web components funcionarem com React. Isso pode ser frustrante.

Felizmente, o React 19 facilitará a integração de web components ao seu código React. Se você encontrar um web component realmente útil, como um carrossel, poderá incorporá-lo sem problemas aos seus projetos React sem a necessidade de convertê-lo para código React.

Isso simplifica o desenvolvimento e permite aproveitar o vasto ecossistema de web components existentes em suas aplicações React.

Por enquanto, não há mais detalhes sobre como o código ficará. No entanto, estou otimista de que envolverá simplesmente a importação de um web component para uma base de código React, de forma semelhante à federação de módulos. Estou ansioso por mais detalhes sobre essa implementação por parte da equipe do React.

5. 📄 Document Metadata 📄

Elementos como "title", "meta tags" e "description" são cruciais para otimizar o SEO e garantir a acessibilidade. No React, onde aplicações de página única são comuns, gerenciar esses elementos em diferentes rotas pode ser complicado.

Atualmente, desenvolvedores frequentemente recorrem a escrever código personalizado ou usar pacotes como react-helmet para gerenciar mudanças de rotas e atualizar o Document Metadata adequadamente. Esse processo pode ser repetitivo e sujeito a erros, especialmente ao lidar com elementos sensíveis ao SEO como meta tags.

Antes:

import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {
  useEffect(() => {
    document.title = title;

    const metaDescriptionTag = document.querySelector('meta[name="description"]');
    if (metaDescriptionTag) {
      metaDescriptionTag.setAttribute('content', 'Nova descrição');
    }
  }, [title]);

  return null;
};

export default HeadDocument;

No código acima, temos um componente HeadDocument responsável por atualizar o "title" e as "meta tags" baseado nas props. Atualizamos esses elementos no hook useEffect. Também usamos JavaScript para atualizar o "title" e as "meta tags". Esse componente será atualizado na mudança de rota. Esta não é uma maneira limpa de fazer isso.

Depois:

Com o React19, podemos usar o "title" e "meta tags" diretamente nos nossos componentes React:

const HomePage = () => {
  return (
    <>
      <title>Freecodecamp</title>
      <meta name="description" content="Blogs do Freecode camp" />
      // Conteúdo da página
    </>
  );
}

Isso não era possível antes no React. A única maneira era usar um pacote como o react-helmet.

6. ⏳ Asset Loading ⏳

Esta funcionalidade é particularmente importante em um contexto web moderno, onde páginas ricas em mídia e interatividade são a norma, e a performance de carregamento pode afetar drasticamente a percepção do usuário e a eficácia do SEO.

O que é Asset Loading?

Asset Loading refere-se à prática de carregar eficientemente recursos como imagens, scripts, folhas de estilo e outros arquivos necessários para a renderização de uma página web. No contexto do React 19, essa funcionalidade é aprimorada para garantir que os ativos sejam carregados de maneira inteligente, reduzindo o tempo de carregamento percebido e melhorando a fluidez da navegação do usuário.

Como Funciona?

No React 19, o Asset Loading é integrado com o Suspense, uma funcionalidade do React que permite aos desenvolvedores declarar um estado de "suspense" ou espera para determinadas partes da sua aplicação. Isso significa que, enquanto um recurso está sendo carregado, o React pode renderizar um estado de espera, como um spinner de carregamento, e substituí-lo pelo conteúdo final uma vez que o recurso esteja disponível. Essa abordagem melhora a experiência do usuário ao minimizar a percepção de lentidão e evitar mudanças bruscas na interface enquanto os ativos são carregados.

Exemplos de Implementação

Imagine que você está construindo uma página de produto para uma loja online, que inclui imagens de alta resolução dos produtos. Sem o Asset Loading otimizado, os usuários podem experimentar um atraso significativo antes de poderem ver as imagens, especialmente em conexões lentas de internet. Com o Asset Loading no React 19, você pode implementar algo assim:

<Suspense fallback={<Spinner />}>
  <ProductImage src="imagem-produto-alta-resolucao.jpg" />
</Suspense>

Neste exemplo, envolve o componente . Enquanto a imagem do produto está sendo carregada, o React exibirá , um componente que você pode ter criado para indicar carregamento. Assim que a imagem estiver pronta, o React a exibirá automaticamente, substituindo o spinner.

Esta abordagem não só melhora a percepção de desempenho da aplicação como também contribui para uma experiência de usuário mais agradável e profissional, evitando o incômodo de carregamentos lentos ou de "piscar" de conteúdo.

7. 🪝🪝 Novos Hooks do React 🪝🪝

Os React Hooks são uma das funcionalidades mais apreciadas introduzidas na biblioteca. Provavelmente, você já usou os hooks nativos do React muitas vezes e talvez até tenha tentado criar seus próprios hooks personalizados. Os hooks são tão populares que se tornaram um padrão de programação no React.

No React 19, a forma como usamos useMemo, forwardRef, useEffect e useContext mudará. Isso se deve principalmente à introdução de um novo hook, use.

🥁 useMemo():

Você não precisará mais usar o hook useMemo() após o React 19, pois o React Forget (o compilador do React) fará a memorização automaticamente.

Antes:

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

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  // Memoriza o resultado da verificação se o valor de entrada está vazio
  const isInputEmpty = useMemo(() => {
    console.log('Verificando se a entrada está vazia...');
    return inputValue.trim() === '';
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Digite algo..."
      />
      <p>{isInputEmpty ? 'A entrada está vazia' : 'A entrada não está vazia'}</p>
    </div>
  );
}

export default ExampleComponent;

Depois:

No exemplo abaixo, você pode ver que, após o React 19, não precisamos memorizar os valores – o React 19 fará isso automaticamente. O código fica muito mais limpo:

import React, { useState } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  const isInputEmpty = () => {
    console.log('Verificando se a entrada está vazia...');
    return inputValue.trim() === '';
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Digite algo..."
      />
      <p>{isInputEmpty ? 'A entrada está vazia' : 'A entrada não está vazia'}</p>
    </div>
  );
}

export default ExampleComponent;

🥁 forwardRef()

Agora, ref será passado como prop ao invés de usar o hook forwardRef(). Isso simplificará o código, portanto, após o React 19, você não precisará mais usar forwardRef().

Antes:

Aqui está um exemplo de como você usaria forwardRef() antes do React 19:

import React, { forwardRef } from 'react';

const ExampleButton = forwardRef((props, ref) => (
  <button ref={ref}>
    {props.children}
  </button>
));

Depois:

ref pode ser passado como uma prop. Não é mais necessário forwardRef().

import React from 'react';

const ExampleButton = ({ ref, children }) => (
  <button ref={ref}>
    {children}
  </button>
);

🥁 O novo hook use()

O React 19 introduzirá um novo hook chamado use(). Este hook simplificará como usamos promessas, código assíncrono e contexto.

Aqui está a sintaxe do hook:

const value = use(recurso);

O código abaixo é um exemplo de como você pode usar o hook use para fazer uma solicitação de busca:

import { use } from "react";

const fetchUsers = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    return res.json();
};
  
const UsersItems = () => {
    const users = use(fetchUsers());
  
    return (
      <ul>
        {users.map((user) => (
          <div key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
            <h2 className='text-xl font-bold'>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        ))}
      </ul>
    );
}; 
export default UsersItems;

Vamos entender o código:

• fetchUsers é responsável pela solicitação GET.
• Estamos usando o hook use para executar fetchUsers em vez de usar os hooks useEffect ou useState.
• O retorno do hook useState é users, que terá a resposta da solicitação GET (usuários).
• No bloco de retorno, estamos usando users para mapeá-lo e criar a lista.

Outro lugar onde podemos usar o novo hook é com Context. A API Context é uma maneira popular de gerenciar estados globais no React sem usar bibliotecas de gerenciamento de estado. Com o hook use, o hook de contexto se parecerá com o código abaixo.

import { createContext, useState, use } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const Card = () => {
  const { theme, toggleTheme } = use(ThemeContext);

  return (
    <div className={`p-4 rounded-md ${theme === 'light' ? 'bg-white' : 'bg-gray-800'}`}>
      <h1 className={`my-4 text-xl ${theme === 'light' ? 'text-gray-800' : 'text-white'}`}>
        Cartão Temático
      </h1>
      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
        Olá!! hook use()
      </p>
      <button onClick={toggleTheme} 
      className='bg-blue-500 hover:bg-blue-600 text-white rounded-md mt-4 p-4'>
        {theme === 'light' ? 'Mudar para Modo Escuro' : 'Mudar para Modo Claro'}
      </button>
    </div>
  );
};

const Theme = () => {
  return (
    <ThemeProvider>
      <Card />
    </ThemeProvider>
  );
};

export default Theme

Vamos entender o código:

• ThemeProvider é responsável por fornecer o contexto.
• Card é o componente onde consumiremos o contexto. Para isso, estaremos usando o novo hook use para consumir o contexto. O resto é como antes do React 19.

No React 19, temos novos hooks para lidar também com status e dados de formulários. Isso tornará o trabalho com formulários mais suave e fácil. Combinando esses hooks com actions (nova funcionalidade do React 19), trabalhar com formulários e gerenciar dados será facilitado.

🥁 O hook useFormStatus()

Esse novo hook no React 19 ajudará você a ter mais controle sobre os formulários que cria, fornecendo informações sobre o status da última submissão de formulário.

Aqui está a sintaxe:

const { pending, data, method, action } = useFormStatus();

Ou a versão simplificada:

const { status } = useFormStatus();

Vamos entender o que cada termo significa:

• pending: se o formulário está em estado pendente, então será true, caso contrário, será false.
• data: um objeto que implementa a interface FormData, contendo os dados que o <form> pai está submetendo.
• method: o método HTTP – GET ou POST. Por padrão, será GET.
• action: uma referência de função.

Este hook será usado para exibir o estado pendente e quais dados estão sendo submetidos pelo usuário.

Exemplo de código:

import { useFormStatus } from "react-dom";

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>{status.pending ? 'Enviando...' : 'Enviar'}</button>;
}

const formAction = async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000)); // Simula um delay de 3 segundos
}

const FormStatus = () => {
  return (
    <form action={formAction}>
      <Submit />
    </form>
  );
};

export default FormStatus;

Vamos entender o que está acontecendo no código acima:

• Submit é um método – a ação de um formulário para submeter o formulário. Este método verifica o status do useFormStatus para saber se status.pending é verdadeiro ou falso.
• Com base em status.pending, podemos exibir a mensagem na UI.
• formAction é um método simulado para atrasar a submissão do formulário.
• Na submissão do formulário, pelo hook useFormStatus, obteremos um status pendente. Enquanto pending for verdadeiro, o texto "Enviando..." será exibido na UI. Uma vez que pending seja falso, o texto "Enviando" será alterado para "Enviado".

Este hook é poderoso e útil quando você quer saber o status de uma submissão de formulário (pendente ou não) e exibir os dados de acordo.

🥁 O hook useFormState()

Outro novo hook no React 19 é o useFormState. Ele permite atualizar o estado baseado no resultado de uma submissão de formulário.

Aqui está a sintaxe:

const [state, formAction] = useFormState(fn, initialState, permalink?);

• fn: a função a ser chamada quando o formulário for submetido ou um botão pressionado.
• initialState: o valor inicial que você quer para o estado. Pode ser qualquer valor serializável. Este argumento é ignorado após a primeira invocação da ação.
• permalink: opcional. Uma URL ou link de página, se fn for executada no servidor, a página redirecionará para permalink.

Este hook retornará:

• state: o estado inicial será o valor que passamos para initialState.
• formAction: uma ação que será passada à ação do formulário. O valor de retorno disso estará disponível no estado.

Exemplo de como funciona:

import { useFormState } from 'react-dom';

const FormState = () => {
    const submitForm = (prevState, queryData) => {
        const name = queryData.get("username");
        if (name === 'john') {
            return { success: true, text: "Bem-vindo" }
        } else {
            return { success: false, text: "Erro" }
        }
    }
    const [message, formAction] = useFormState(submitForm, null);
    return (
      <form action={formAction}>
          <label>Nome</label>
          <input type="text" name="username" />
          <button>Enviar</button>
          {message && <h1>{message.text}</h1>}
      </form>
    );
}

export default FormState;

Vamos entender o código:

• submitForm é o método responsável pela submissão do formulário, atuando como a Ação.

• Dentro de submitForm, verificamos o valor do formulário e, dependendo se é bem-sucedido ou mostra um erro, retornamos o valor e mensagem específicos.

• Também podemos verificar o prevState do formulário.

• Ao executar este exemplo, você verá uma mensagem de "bem-vindo" se o nome for John; caso contrário, retornará "erro".

Este hook é uma ferramenta poderosa para atualizar o estado baseado no resultado de uma submissão de formulário.

🌟 Resumo

Cobrimos muito neste artigo. Aqui está um rápido resumo das mudanças empolgantes que vêm para o React v19:

• Haverá um novo compilador React chamado "React Forget".
• Teremos re-renderização automática, memorização e otimização de estado e UI.
• Haverá alguns novos hooks como use() que ajudarão a simplificar promises e código assíncrono.
• Haverá agora suporte a componentes do lado do servidor no React.
• Teremos melhor manipulação de formulários usando ações, useFormStatus(), useStatusForm(), e useOptimistic().
• O React otimizará o Asset Loading para melhorar o desempenho usando suspense por baixo dos panos.
• Teremos integração de componentes web no React.