O React 19 traz melhorias significativas no desenvolvimento de aplicações web, com foco especial em formulários, performance e experiência do desenvolvedor. Vamos explorar as principais novidades desta versão.
Hook useFormStatus
O useFormStatus é um novo hook que permite acompanhar o estado de submissão de formulários em tempo real. Ideal para feedback visual durante submissões.
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Enviando...' : 'Enviar'}
</button>
);
}
function Form() {
return (
<form action="/api/submit">
<input type="text" name="name" />
<SubmitButton />
</form>
);
}
Como funciona:
Primeiramente, o useFormStatus monitora quando o formulário é enviado. Em seguida, ele atualiza a variável pending, permitindo que o estado do botão seja alterado de forma dinâmica. Dessa forma, enquanto o back-end processa os dados, o botão é desabilitado e o texto muda para “Enviando…”.
Hook useActionState
O useActionState facilita a gestão de estados durante ações assíncronas, como criar, atualizar ou remover itens de uma lista. Ele controla loading, possíveis erros e resultados, substituindo a necessidade de escrever lógica de estado manual repetitivamente.
function TodoForm() {
const [state, action] = useActionState(async (data) => {
await addTodo(data);
});
return (
<div>
{state.loading && <p>Adicionando...</p>}
{state.error && <p>Erro: {state.error.message}</p>}
<form action={action}>
<input name="todo" />
<button type="submit">Adicionar</button>
</form>
</div>
);
}
Como funciona:
Em primeiro lugar, o hook retorna loading e error, o que facilita oferecer feedback amigável aos usuários. Além disso, o action pode ser passado diretamente como atributo do formulário, seguindo o novo padrão do React. Assim, o fluxo de envio torna-se mais simples e intuitivo.
Actions com formulários
As Actions permitem que as funções de envio sejam declaradas diretamente em componentes (usando ‘use server’ ou equivalentes), evitando o uso de bibliotecas adicionais para lidar com dados do formulário. Isso reduz a quantidade de código necessária para enviar e manipular dados.
function LoginForm() {
async function handleLogin(formData) {
'use server';
const { email, password } = Object.fromEntries(formData);
await authenticateUser(email, password);
}
return (
<form action={handleLogin}>
<input name="email" type="email" />
<input name="password" type="password" />
<button type="submit">Entrar</button>
</form>
);
}
Como funciona:
Antes de mais nada, é importante destacar que o React cuida internamente de eventos como onSubmit e métodos como preventDefault(). Dessa forma, há uma separação clara entre a lógica de servidor e a interface, o que traz maior organização ao projeto.
Otimizações do React 19
Além dos novos hooks e suporte a actions, o React 19 traz melhorias profundas em performance e usabilidade:
- Novo sistema de renderização: gerenciamento de re-renderizações foi aprimorado, reduzindo o tempo de resposta.
- Gerenciamento de memória otimizado: componentes e listas grandes são processados de forma mais eficiente.
- Melhorias no DevTools: facilita depuração e monitoramento do estado dos componentes.
Comparativo hipotético1
- Em testes internos, o tempo de renderização em casos de listas extensas estão reduzidos.
- Aplicações grandes podem perceber menor tempo de carregamento e menor uso de recursos.
Conclusão
As novidades do React 19 se destacam por fornecer novas ferramentas para formulários (useFormStatus, useActionState e Actions), além de otimizações importantes para performance. Tais mudanças visam simplificar o fluxo de desenvolvimento e entregar interfaces cada vez mais rápidas e coesas. Você pode conferir sobre essas e outras novidades diretamente na documentação atualizada do React.
Inclusive, temos uma playlist onde explicamos de forma prática cada item abordado nesse artigo, com exemplos práticos.
Caso você queira se aprofundar na carreira front-end, principalmente no desenvolvimento com React, saiba que temos a formação para Desenvolvedor React Funcional, que irá ajudá-lo a se tornar um desenvolvedor muito melhor. São 14h17 de vídeo com muito conteúdo e um total de 59 exercícios.
Veja quais são os cursos que fazem parte desta formação:
