React 19 - Descrição das mudanças na nova versao do react
1ª NOVIDADE - COMPILADOR DO REACT - REACT COMPILER
O objetivo do compilador React é tornar automatico o gerenciamento das re-renderizações, oque isso impacta na escrita do código? Ele torna desnecessário a utilização de otimizações manuais como por exemplo:
memo, useMemo(), useCallBack()
.
Sendo assim, o própio compilador tomará decisoes de como e quando atualizar a UI e o estado, ordenando quando re-renderizar e quando otimizar.
2ª NOVIDADE - COMPONENTES DO LADO DO SERVIDOR - SERVER COMPONENTS
No dia a dia do programador React os componentes sao utilizados e executados do lado do cliente.
Tecnologias como NextJS e React ja estão introduzindo comoponentes que são executados no lado do servidor .
Quais vantagens de ter componentes do lado do Servidor?
-
Perfomace Expandida O carregamento da sua web page se torna mais rapido e a perfomace aumenta como um todo, sendo claramente útil para projetos com muito conteúdo.
-
Eficiência no Processamendo de tarefas: Gateway API , chamadas de API no geral, se tornam mais eficientes pois os server components tornam mais eficientes a execução de tarefas no server side.
-
SEO Facilitado: Voce sabe o que é Web Crawler? Web crawler, ou spider, ou rastreador da internet, é um tipo de bot que normalmente é operado por mecanismos de pesquisa, como Google e Bing. Com renderizações no lado do servidor as informações do site / aplicação se tornam mais "faceis" de serem localizadas pelos crawlers.
3ª NOVIDADE - SUBSTITUIÇÃO DE ONSUBMIT POR ACTIONS NO FORMULÁRIO
Nas versões anteriores do react, quando se fazia necessário trabalhar com envio de informações em um formulario utilizava-se:
<form onSubmit={ handleSubmit }>
conteudo
</form>
Entretanto, agora será possivel utilizar o atributo "action" natural da tag HTML <form/>
tornando desnecessario usar o hook react pois o propio action executa a função diretamente.
Quais as vantagens dessa 'nova' abordagem?
-
Agrega para uma melhor organização e divisão de responsibilidades entre o cliente e servidor.
-
Contribui de forma veemente na manipulação de formulários ao permitir que a lógica do processamento seja executada no servidor.
-
Torna mais simples a criação de formulários com códigos limpos mantendo a eficiência, propondo menos dependências de scripts do lado do cliente, as mudanças com a chegada do action afetam o uso de useState nos forms,pois agora sera possivel acessar os dados nos campos de entrada atraves da nova propiedade FormData usando a tag name dos inputs:
Não ficou muito claro ainda? Vejamos um exemplo:
const handleSubmit( formData ) {
const usuario = formData.get("user");
const senha = formData.get("password");
}
<input type="password" name="password"></input>
<input type="text" name="user"> </input>
4ª NOVIDADE - META TAGS NO JSX
Anteriormente as tags ficavam no index.html ao criar um projeto react, porém na nova versão tags como:
<title>
<description>
Estarão disponiveis para serem adicionadas em componentes reacts.
Exemplo:
const index() {
return (
<Fragment>
<title> Titulo da pagina </title>
<div> conteudo </div>
<Fragment/>