React novidades - Fevereiro de 2024
No dia 15/02/24 rolou uma atualização no blog react.dev com novos conteúdo e novidades do React que devem ser lançadas no final de 2024.
Trago aqui um resumo do que foi publicado:
React Compiler
Atualmente, para realizar memoização e evitar que o React realize muitos re-renders desnecessários é preciso aplicar algumas técnicas de memoização de forma manual, utilizando hooks como useMemo, useCallback e a api memo.
Essa abordagem funciona mas pode levar a vários erros, esquecimento, aplicação incorreta e até mesmo a perda de performance. É uma abordagem manual e que exige um conhecimento a mais de como cada etapa do React funciona.
Sendo assim, o time Core acredita que é possível que o React realize o re-render somente em partes que realmente precisam ser atualizadas, sem a necessidade de utilizar hooks de memoização. Por isso o time Core está desenvolvimento um novo compilador para o React.
O compilador React vai ser capaz de compilar código seguramente levando em consideração duas regras, as regras do JavaScript e do React.
Um exemplo disto é que um componente React precisa ser idempotente, ou seja, dado um input com mesmo valor ele deve ter uma saída igual e não pode sofrer mutações de estado ou propriedades.
Caso queira saber mais como o compilador funciona, acesse este vídeo.
Actions
Uma solução para envio de dados do cliente para o servidor são os Server Actions, dessa maneira é possível executar alterações no banco de dados através dos dados de um formulário. Durante o desenvolvimento de Server Actions o time Core do React está extendendo esse suporte de APIs para que seja possível realizar manipulações de dados em aplicações client-only.
Essa abordagem é referida apenas como Actions. Que permite passar funções para um elemento DOM, como um formulário <form />
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
A função action pode trabalhar assíncronamente ou sincronamente. Quando utilizar uma action, o React vai gerenciar o ciclo de vida e envio dos dados através de hooks como useFormStatus, e useFormState, que permitem acessar o estado de uma ação de um formulário.
Por padrão, as Actions são enviandos utilizando transation, mantendo a UI responsiva e sem bloqueios.
Como Actions suportam eventos async o React vai ser capaz de validar se a requisição está pendente isPending, permitindo controle pelo desenvolvedor(a) de como a UI deve se comportar.
Também está sendo adicionado uma feature chamada useOptimisticpara gerenciamento de estados otimistas, que permite que a UI seja atualizada antes mesmo da requisição ser completada.
Isso permite que seja inserido um estado final aos dados do cliente, assumindo que o envio dos dados foram realizados com sucesso, e reverter para o valor do dado recebido pelo servidor. Essa abordagem funciona utilizando async/await, da mesma forma que já realizado um fetch do lado do cliente ou através de um Server Action do lado do servidor.
React Canary
Features como esta podem ser testadas através do React Canary, que é uma versão do React que permite testar novas features antes mesmo delas serem lançadas oficialmente.
React Server Components, Asset Loading, Document Metadata e Actions estão disponíveis para testes no React Canary.
Conclusão
As atualizações do React são promissoras e trazem grandes benefícios para o desenvolvimento de aplicações web. É importante se manter atualizado e testar as novas features para aproveitar ao máximo todo o potencial do React.
As atualizações prometem simplificar o desenvolvimento de aplicações React, tornando-o mais eficiente e performante, além de evitar erros humanos e perda de performance.
As features ainda em desenvolvimento podem sofrer alterações antes do lançamento oficial. É importante avaliar a necessidade de cada feature antes de implementá-la em um projeto.