Executando verificação de segurança...
5

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?

  1. 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.

  2. 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.

  3. 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?

  1. Agrega para uma melhor organização e divisão de responsibilidades entre o cliente e servidor.

  2. Contribui de forma veemente na manipulação de formulários ao permitir que a lógica do processamento seja executada no servidor.

  3. 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/>
Carregando publicação patrocinada...
1

Ótimo resumo. Mudanças bem interessantes.
Interessante também essa mudança de paradigma de retorno às origens da programação web para o lado do servidor.
Vou procurar exemplos dessa nova opção e entendo como que ela funciona dentro do escopo do React.