4 Novidades do React 19 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 06 Horas 00 Min 03 Seg Tempo restante da oferta: 06 00 03 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) 4 Novidades do React 19 [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ React ](https://www.treinaweb.com.br/blog/categoria/react) # 4 Novidades do React 19 Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 2 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19.jpg) O [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "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](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks/ "hook") que permite acompanhar o estado de submissão de formulários em tempo real. Ideal para feedback visual durante submissões. ```javascript function SubmitButton() { const { pending } = useFormStatus(); return ( {pending ? 'Enviando...' : 'Enviar'} ); } function Form() { return ( ); } ``` **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. ```javascript function TodoForm() { const [state, action] = useActionState(async (data) => { await addTodo(data); }); return ( {state.loading && Adicionando...} {state.error && Erro: {state.error.message}} Adicionar ); } ``` **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. ```javascript function LoginForm() { async function handleLogin(formData) { 'use server'; const { email, password } = Object.fromEntries(formData); await authenticateUser(email, password); } return ( Entrar ); } ``` **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: 1. **Novo sistema de renderização:** gerenciamento de re-renderizações foi aprimorado, reduzindo o tempo de resposta. 2. **Gerenciamento de memória otimizado:** componentes e listas grandes são processados de forma mais eficiente. 3. **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](https://react.dev/learn "documentação atualizada do React"). Inclusive, temos uma [playlist onde explicamos de forma prática cada item abordado nesse artigo](https://www.youtube.com/watch?v=ljbWoULs-yw&list=PLZ5WLsqE1WPHkmHdMbuS1XdvHMImyDlST), 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](https://www.treinaweb.com.br/formacao/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: - [React - Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos) - [React - Dominando Componentes Funcionais](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais) - [React - Despertando o Poder dos Hooks](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) - [React - Conhecendo o React Router](https://www.treinaweb.com.br/direto-ao-ponto/react-conhecendo-o-react-router) - [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components) - [React - Boas práticas](https://www.treinaweb.com.br/curso/react-boas-praticas) - [React - Novidades do React 19](https://www.treinaweb.com.br/direto-ao-ponto/react-novidades-do-react-19) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/IDE-CSHARP-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Principais IDEs para desenvolvimento C# ](https://www.treinaweb.com.br/blog/principais-ides-para-desenvolvimento-c) Veja neste artigo as principais IDEs para desenvolvimento C#. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que há de novo no React 16? ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16) O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/ATUALIZADO-TI-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ Dicas para se manter atualizado na área de TI ](https://www.treinaweb.com.br/blog/dicas-para-se-manter-atualizado-na-area-de-ti) Veremos neste artigo algumas dicas para você colocar em prática, pois se manter atualizado é fundamental para se destacar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/20171324/CAPA-ESTUDOS-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 7 anos atrás ## [ Como melhorar sua rotina de estudos ](https://www.treinaweb.com.br/blog/como-melhorar-sua-rotina-de-estudos) Confira neste artigo como melhorar sua rotina de estudos e se manter motivado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/22182140/TEMPLATES-GRATUITOS-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Templates gratuitos para aplicações administrativas ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-aplicacoes-administrativas) Neste artigo veremos alguns templates para criação de aplicações administrativas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/BOOTSTRAP-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Bootstrap? ](https://www.treinaweb.com.br/blog/o-que-e-bootstrap) Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/06145840/GANHOS-RECORRENTES-400x280.png) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 8 anos atrás ## [ Como ter ganhos recorrentes sendo um profissional freelancer ](https://www.treinaweb.com.br/blog/como-ter-ganhos-recorrentes-sendo-um-profissional-freelancer) Neste artigo, convido você a explorar 6 possibilidades de ganhos que vão além daquelas que já conhecemos e que irão te render uma graninha todo mês. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/17135558/capa-marketing-digital1-400x280.jpg) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 8 anos atrás ## [ Por que devo investir no Marketing Digital? ](https://www.treinaweb.com.br/blog/por-que-devo-investir-no-marketing-digital) Veja neste artigo o porquê você deve investir em Marketing Digital no seu negócio. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/12091849/novidades-html5-2-400x280.jpg) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) 9 anos atrás ## [ Novidades do HTML 5.2 ](https://www.treinaweb.com.br/blog/novidades-html-5-2) Conheça as novidades do HTML 5.2, suas adições e depreciações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13103521/chrome53-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 9 anos atrás ## [ Novidades do Chrome 63 para os desenvolvedores ](https://www.treinaweb.com.br/blog/novidades-do-chrome-63-para-os-desenvolvedores) Veja algumas das novidades presentes no Chrome 63, última versão do navegador a ser lançada em 2017. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/27101528/NOVIDADES-WORDPRESS-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 9 anos atrás ## [ Novidades do WordPress 4.9 ](https://www.treinaweb.com.br/blog/novidades-wordpress-4-9) Veja as novidades do WordPress 4.9, lançado no dia 16 de novembro. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **06h 00min 03s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58