React 19: What Changed and What It Means For You

Por que React 19 importa

Depois de meses em beta, o React 19 chegou com mudanças que impactam diretamente como escrevemos formulários, lidamos com estado assíncrono e pensamos em componentes. Não é apenas uma atualização de versão — é uma mudança de paradigma.

Actions: formulários sem useState

A mudança mais prática do React 19 são as Actions. Antes, um formulário simples exigia useState para loading, error e data. Agora, funções assíncronas passadas para action= lidam com tudo isso automaticamente.

tsx

// Antes (React 18)
function Form() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    try {
      await submitData(new FormData(e.currentTarget as HTMLFormElement));
    } catch (err) {
      setError(String(err));
    } finally {
      setLoading(false);
    }
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

// Depois (React 19)
function Form() {
  const [state, formAction, isPending] = useActionState(submitData, null);
  return <form action={formAction}>...</form>;
}

💡

useActionState substitui o padrão useState+try/catch em formulários. O terceiro valor isPending elimina o loading state manual.

O hook use() — lendo Promises e Context

O novo hook use() permite ler uma Promise ou Context dentro de qualquer bloco condicional — algo que os hooks tradicionais não permitem. Combinado com Suspense, simplifica muito o data fetching.

tsx

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // suspende até resolver
  return <div>{user.name}</div>;
}

// Uso condicional também funciona
function Component({ condition }: { condition: boolean }) {
  if (condition) {
    const theme = use(ThemeContext); // válido!
    return <ThemedView theme={theme} />;
  }
  return <DefaultView />;
}

ref como prop — fim do forwardRef

Componentes funcionais agora recebem ref diretamente como prop. Não é mais necessário envolver tudo em forwardRef, o que simplifica muito a escrita de componentes de UI.

tsx

// Antes
const Input = forwardRef<HTMLInputElement, InputProps>(({ placeholder }, ref) => (
  <input ref={ref} placeholder={placeholder} />
));

// Depois (React 19)
function Input({ placeholder, ref }: InputProps & { ref?: Ref<HTMLInputElement> }) {
  return <input ref={ref} placeholder={placeholder} />;
}

Document Metadata nativamente

React 19 suporta renderizar <title>, <meta> e <link> diretamente dentro de componentes. O React cuida de hoistá-los para o <head> automaticamente, sem necessidade de react-helmet ou portais manuais.

tsx

function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

ℹ️

Este site usa um componente SEOHead customizado que gerencia meta tags via DOM diretamente. Com React 19, isso poderia ser simplificado para JSX nativo.

Conclusão

React 19 resolve problemas reais que todo desenvolvedor encontra no dia a dia: formulários verbosos, ref forwarding cerimonioso e meta tags trabalhosas. A curva de migração é suave — as mudanças são aditivas, não quebram código existente.