O React 19 já está chegando, conheça as novas features!
O React está constantemente evoluindo, e a próxima grande atualização, a versão 19, está à vista, trazendo uma série de novidades. Neste artigo, vamos dar uma olhada nas últimas inovações que estão chegando, incluindo o React Compiler, as Actions, os React Canaries e novos hooks experimentais.
React Compiler
Imagine que você está construindo um aplicativo React e, sempre que o estado muda, toda a interface de usuário é renderizada novamente. Isso pode ser ineficiente e até causar problemas de desempenho, certo? Para contornar isso, muitos de nós recorremos à memorização manual usando useMemo, useCallback e memo. Mas isso nem sempre é prático e pode acabar complicando nosso código.
É aí que entra o React Compiler, uma ferramenta que está sendo adotada até mesmo pelo Instagram em produção. Ele automatiza o processo de renderização, garantindo que apenas as partes necessárias da interface sejam atualizadas quando o estado muda. Incrível, não é?
Mas como o React Compiler consegue fazer isso? Bem, ele não é só mais um compilador JavaScript. Ele foi desenvolvido com uma compreensão profunda das regras do React e do JavaScript. Por exemplo, ele sabe que os componentes do React devem ser idempotentes, ou seja, sempre retornar o mesmo valor para as mesmas entradas. Isso ajuda a criar um ambiente seguro para a otimização.
Claro, nós, desenvolvedores, nem sempre seguimos todas as regras à risca, não é mesmo? Mas o React Compiler é inteligente o suficiente para detectar quando nosso código está se desviando um pouco do caminho e decide se deve ou não otimizá-lo.
Quer ver o React Compiler em ação? Dê uma olhada na palestra da equipe do React do ano passado, onde eles mostram como ele foi usado de forma experimental no Instagram. Desde então, o Compiler foi implementado em toda a plataforma, marcando um avanço significativo.
Actions
Imagine poder enviar dados do cliente para o servidor de forma simplificada, executar mutações no banco de dados e implementar formulários, tudo isso com uma abordagem mais intuitiva e amigável. Isso mesmo, as Actions estão aqui para tornar isso possível!
Antes de mais nada, vamos entender o que são as Actions. Elas permitem que você passe uma função para elementos do DOM, como um formulário. Por exemplo:
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>A função de ação pode operar de forma síncrona ou assíncrona e pode ser definida tanto no lado do cliente usando JavaScript padrão quanto no servidor com a diretiva use server. O React irá gerenciar o ciclo de vida do envio de dados para você ao utilizar uma ação, fornecendo hooks como useFormStatus e useFormState para acessar o estado atual e a resposta da ação do formulário.
Uma das vantagens das Actions é que elas são submetidas por padrão dentro de uma transição, mantendo a página atual interativa enquanto a ação está sendo processada. E como as Actions suportam funções assíncronas, agora é possível usar async/await em transições, permitindo mostrar interfaces de usuário pendentes com o estado isPending de uma transição quando uma solicitação assíncrona, como uma busca, é iniciada, e mostrar a interface pendente até que a atualização seja aplicada.
Além das Actions, estão introduzindo um recurso chamado useOptimistic para gerenciar atualizações de estado otimistas. Com esse hook, você pode aplicar atualizações temporárias que são automaticamente revertidas uma vez que o estado final é confirmado. Isso é especialmente útil para Actions, pois permite definir otimisticamente o estado final dos dados no cliente, assumindo que o envio foi bem-sucedido, e reverter para o valor dos dados recebidos do servidor.
Os autores de bibliotecas podem implementar props de ação personalizadas em seus próprios componentes com useTransition. Objetivo é que as bibliotecas adotem o padrão de Actions ao projetar suas APIs de componentes, proporcionando uma experiência consistente para os desenvolvedores do React.
Embora inicialmente time do React tenha focado nas Server Actions para a transferência de dados entre cliente e servidor, a filosofia para o React é fornecer o mesmo modelo de programação em todas as plataformas e ambientes. Quando possível, se introduzirem um recurso no cliente, o objetivo é fazê-lo também funcionar no servidor e vice-versa. Essa abordagem permite criar um conjunto único de APIs que funcionam independentemente de onde seu aplicativo é executado, facilitando a atualização para diferentes ambientes no futuro.
As Actions já estão disponíveis no canal Canary e serão lançadas na próxima versão do React.
React Canary
Primeiro, vamos entender o que são os React Canaries. Eles são uma nova opção que oferece a possibilidade de adotar recursos estáveis individualmente assim que o design deles estiver próximo da versão final, antes de serem lançados em uma versão estável.
Os Canaries representam uma mudança na forma como eles desenvolvem o React. Anteriormente, recursos eram pesquisados e desenvolvidos internamente dentro da Meta, de modo que nos desenvolvedores só viamos o produto final quando era lançado na versão estável. Com os Canaries, eles estão construindo de forma pública, com a ajuda da comunidade, para finalizar recursos que compartilham na série de blogs React Labs. Isso significa que você fica sabendo dos novos recursos mais cedo, enquanto estão sendo finalizados, em vez de depois de concluídos.
Agora, vamos dar uma olhada nos novos recursos que já estão disponíveis no React Canary:
Diretivas:
Introduziram o “use client” e “use server”, eles marcam os “pontos de divisão” entre os dois ambientes: “use client” instrui o empacotador a gerar uma tag <script> (como nas Astro Islands), enquanto “use server” diz ao empacotador para gerar um endpoint POST (como nas mutações tRPC). Juntos, eles permitem escrever componentes reutilizáveis que compõem a interatividade do lado do cliente com a lógica do lado do servidor.
Metadados do documento:
Adicionaram suporte integrado para renderizar <title>, <meta> e tags de <link> em qualquer lugar da sua árvore de componentes. Isso funciona da mesma forma em todos os ambientes, incluindo código totalmente do lado do cliente, SSR e RSC. Isso fornece suporte integrado para recursos pioneiros por bibliotecas como React Helmet.
Carregamento de recursos:
Integraram o Suspense com o ciclo de vida de carregamento de recursos, como estilos, fontes e scripts, para que o React os leve em consideração ao determinar se o conteúdo em elementos como <style>, <link> e <script> está pronto para ser exibido. Também adicionaram novas APIs de carregamento de recursos como preload e preinit para fornecer maior controle sobre quando um recurso deve ser carregado e inicializado.
Actions:
Como compartilhei anteriormente, adicionaram Actions para gerenciar o envio de dados do cliente para o servidor. Você pode adicionar ação a elementos como <form/>, acessar o status com useFormStatus, lidar com o resultado com useFormState e atualizar otimisticamente a UI com useOptimistic.
Dado que todos esses recursos trabalham juntos, é difícil lançá-los individualmente no canal Stable. Lançar Actions sem os hooks complementares para acessar os estados dos formulários limitaria a usabilidade prática das Actions. Introduzir React Server Components sem integrar Server Actions complicaria a modificação de dados no servidor.
Antes de poderem lançar um conjunto de recursos no canal Stable, eles precisam garantir que funcionem de forma coesa e que nós desenvolvedores tenhamos tudo o que precisamos para usá-los em produção. Os React Canaries permite eles desenvolverem esses recursos individualmente e lançar APIs estáveis de forma incremental até que todo o conjunto de recursos esteja completo.
Novos hooks
Embora ainda não façam parte da versão estável, esses hooks prometem abrir novas possibilidades para o desenvolvimento React. Vamos dar uma olhada em alguns deles:
use(Promise)
Este hook integra o Suspense com Promise, tornando o carregamento de dados e o tratamento de erros mais simples e elegantes. Imagine realizar uma solicitação a uma API e exibir um estado de carregamento enquanto a promise é resolvida. Isso pode facilitar a forma como lidamos com a busca de dados assíncronos em nossos aplicativos React.
use(Context)
Este hook oferece uma maneira mais intuitiva de acessar e gerenciar contexto dentro de componentes funcionais. Por exemplo, você pode acessar informações de autenticação do usuário a partir de um provedor de contexto global, proporcionando uma experiência de desenvolvimento mais coesa e eficiente.
useFormState e useFormStatus
Esses hooks fornecem funcionalidades específicas para lidar com dados e estado de formulário de uma forma unificada e simplificada. Se você já se viu lidando com a complexidade dos formulários em React, esses hooks podem ser uma verdadeira dádiva, tornando o gerenciamento de formulários mais intuitivo e eficiente.
Embora esses hooks ainda estejam em fase experimental, eles representam uma evolução no ecossistema do React. Estou ansioso para ver como a podemos explorar e incorporar esses recursos em nossos projetos.
Se você estiver interessado em experimentar esses hooks, recomendo verificar o canal React Canary e começar a explorar esses novos recursos. E lembre-se, mesmo que esses hooks sejam experimentais, seu feedback e contribuições são extremamente valiosos para ajudar a moldar o futuro do React.
Conclusão
À medida que o React 19 se aproxima do lançamento, estamos testemunhando um momento de grandes evoluções desta biblioteca que nós amamos. Com melhorias significativas e mudanças impactantes, incluindo suporte para Web Components e outros recursos esperados há tempos, o React 19 representa uma nova era para o desenvolvimento frontend.
Para aproveitar ao máximo o potencial do React 19, nós desenvolvedores podemos começar revisando a documentação, adaptando nossos projetos para as mudanças importantes e explorando os novos recursos disponíveis.
Estou ansioso para ver como essa atualização revolucionará a forma como desenvolvemos aplicativos web com o React.
O conteúdo desse artigo foi tirado do post oficial do time do React:
React Labs: What We’ve Been Working On — February 2024
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬
Se gostou, dê 1 ou 50 claps (Só clicar 50x na 👏)
Obrigado pela leitura!
Me acompanhe por aí! 😜
- Portfólio: vinniciusgomes.com
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
