Texto de: Marlliton Souza

Introdução

Recentemente, foi anunciado o React 19 RC, uma versão Release Candidate que traz várias melhorias e novidades para uma das tecnologias de desenvolvimento frontend mais populares do mercado, e neste artigo falaremos de algumas dessas novidades.

Ações (actions)

As actions nos permitem ouvir eventos disparados pelo usuário, seja um click, ou um envio de formulário e simplificam o gerenciamento de estados e mutação de dados que acontece em função desse evento.

Dessa forma podemos automatizar processos como lidar com estados pendentes e estados de erros, de forma mais eficiente. O que deixa nosso código mais limpo. Por exemplo, imagine que você está fazendo o envio de formulário de forma tradicional no React, provavelmente, você terá um código parecido com esse:

function Form() {
  const [nome, setNome] = useState("");
  const [erro, setErro] = useState(null);
  const [carregando, setCarregando] = useState(false);

  const submeter = async () => {
    setCarregando(true);
    const erro = await enviarNome(nome);
    setCarregando(false);
    if (erro) {
      setErro(erro);
      return;
    }
    redirect("/path");
  };

  return (
    <div>
      <input value={nome} onChange={valor => setNome(valor.target.value)} />
      <button onClick={submeter} disabled={carregando}>
        Enviar
      </button>
      {erro && <p>{erro}</p>}
    </div>
  );
} 

Com o uso das actions, podemos automatizar, por exemplo, o estado de carregamento da aplicação usando useTransition:

function Form() {
  const [nome, setNome] = useState("");
  const [erro, setErro] = useState(null);
  const [isPending, startTransition] = useTransition();

  const submeter = () => {
    startTransition(async () => {
      const erro = await enviarNome(nome);
      if (erro) {
        setErro(erro);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={nome} onChange={(event) => setNome(event.target.value)} />
      <button onClick={submeter} disabled={isPending}>
        Enviar
      </button>
      {erro && <p>{erro}</p>}
    </div>
  );
} 

Com o uso do useTransition não precisamos mais manipular estados de carregamento manualmente com o uso de estados, basta usarmos já que o isPending será true quando a transação começa e false automaticamente quando ela termina com erro ou sucesso. Isso permite que a interface se mantenha interativa mesmo enquanto os dados estiverem sendo alterados.

Novo hook useActionState

O React 19 também introduziu o suporte para o useActionState que é um hook que pode ser usado para gerenciar formulários automaticamente.

O useActionState aceita uma função, que é chamada de action (ação), e retorna uma ação encapsulada que pode ser passada para o seu formulário. Essa ação irá gerenciar os estados possíveis do form de uma forma simples, o que permite que possamos gerenciar estados de erro e carregamento com facilidade.

import { redirect } from "next/navigation";
import { useActionState } from "react";

export default function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (estadoAnterior, formData) => {
      const error = await enviarNome(formData.get("nome"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

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

Nova API: use

De forma tradicional, sempre usamos estados (useState) e efeitos colaterais (useEffect) para lidar com requisições assíncronas. Usando a nova API use podemos descartar o uso de useState e useEffect para lidar com esse tipo de requisições.

Basta passar a promessa para o método use e ele mesmo se encarregará de fazer a suspensão dos componentes e quando o resultado da promessa chegar ele já se encarrega de “liberar” o uso dos dados que poderão ser renderizados em seguida.

import { Suspense, use } from "react";

function Posts({ promessa }: { promessa: Promise<string[]> }) {
  const res = use(promessa);
  return <div>{res.map(post => post)}</div>;
}

export default function Home() {
  const promessa = new Promise<string[]>(resolve => {
    setInterval(() => resolve(["Post 1", "Post 2", "Post 3", "Post 4"]), 2000);
  });

  return (
    <div>
      <Suspense fallback={<div>carregando...</div>}>
        <Posts promessa={promessa} />
      </Suspense>
    </div>
  );
} 

Também é possível ler contextos inteiros com essa nova API, o que dispensa o uso do hook useContext:

import { use } from "react";
import TemaContext from "./TemaContext";

export default function Home({ children }) {
  const tema = use(TemaContext);
  return (
    <div
      style={{
        color: tema.cor,
      }}
    >
      {children}
    </div>
  );
} 

Melhorias do React 19

Agora, você pode passar referencias (ref) usando as props, ou seja, não é mais necessário fazer uso do forwardRef. Antes, para fazermos uso das refs em componentes, nós faríamos assim:

const Input = forwardRef<HTMLInputElement, InputProps>(
    ({ className, children ...rest }, ref) => {
        
        return (
            <input ref={ref} className={className} {...rest}>{children}</input>
        )
    },
)

Input.displayName = 'Input'

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

Então, apesar da complexidade para iniciante de entender e utilizar o forwardRef tínhamos que declarar o displayName, caso contrário o React não saberia o nome do componente. Agora, basta passar a ref por props, como qualquer outra propriedade React:

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

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

Contexto como provedor

Agora, não precisamos mais utilizar <Context.Provider> para criar provedores de contexto em nossa aplicação, basta envolver a aplicação com o contexto, sem precisar chamar o provider:

const TemaContext = createContext('');

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

Resumo

O React 19 trouxe muitas novidades, como a adição de novos hooks e melhorias na API, que nos ajudarão a criar aplicações mais leves e performáticas. Além das novidades abordadas neste artigo, existem várias outras melhorias e adições feitas ao React 19 que você pode conferir clicando aqui.