Esta semana, falaremos sobre as novas atualizações e ganchos do React 19. Tendo passado e usado algumas dessas novas atualizações, só posso concordar que isso simplificou algumas das atividades rigorosas pelas quais os desenvolvedores passam ao criar aplicativos, especialmente aplicativos interativos relacionados a formulários.

Junte-se a mim e deixe-nos explorar algumas dessas novas atualizações.

React Compiler: O React compiler escolhe seu código React, traduz-o em um código JavaScript para o navegador e gerencia o estado do seu componente ou interface do usuário. Esta ação singular ajuda a otimizar o desempenho da sua aplicação.

Se você estiver familiarizado com o gancho useMemo, o gancho useCallback e o React.Memo, entenderá que eles ajudam a memorizar (armazenamento de valores ou funções para usos futuros) seus componentes, para que não precisem re- renderizar quando não há alterações de estado. Quando há mudanças no estado, o React renderiza novamente o componente em questão, e seus filhos, e quando não há mudanças no seu código, o componente permanece como está, mantendo a memória, valor e estado anteriores no componente ou gancho para futuro usos; otimizando assim o desempenho de seus componentes. Isso é exatamente o que o React Compiler faz automaticamente, sem a necessidade de chamar manualmente nenhum dos ganchos mencionados.

Form Actions: Uma das maiores vantagens de usar React é o gerenciamento e mutação de estado, e isso acontece principalmente quando usamos Elementos . Os formulários nos ajudam a criar e lidar com a interatividade do usuário de maneira mais eficaz.

Com ações de formulário, você não precisa de manipuladores de eventos como onSubmit e onChange para efetuar a mutação ao vivo de dados. Em vez disso, podemos passar uma propriedade action ao elemento

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

Com esta abordagem, não precisamos da aplicação de useState para transformar dados por meio de event.target.value. Em vez disso, em myFunction podemos obtenha os dados mutados por meio de um argumento.

Significa que a partir do elemento em nosso formulário, temos que definir um atributo de nome. Usar este método significa que permitimos que o React manipule o próprio formulário por meio do Native React form Object em vez de alterar manualmente o estado por meio de manipuladores de eventos.

Componentes do servidor: O React 19 permite que os componentes sejam renderizados em um servidor antes do empacotamento, em um ambiente separado do aplicativo cliente ou da configuração do servidor SSR. Os componentes do servidor não são iguais ao SSR (renderização do lado do servidor), mas um ambiente de servidor separado nos componentes do React Server.
Esse recurso permite que os componentes sejam pré-renderizados antes do tempo, resultando em exibições rápidas de conteúdo e melhor tempo de carregamento.

Metadados: React 19 permite metadados flexíveis. Os desenvolvedores podem gerenciar o title, description e outras meta tags de componentes individuais por meio do componente DocumentHead. Isso ajudará a melhorar o SEO (Search Engine Optimization).

Const AboutUs = () => {
 return (
    
      
      // content
    >
  );
}

React 19 tem uma série de novos, alguns novos, outros uma melhoria dos ganchos existentes. Vamos discutir sobre eles abaixo.

O gancho use(): O gancho use é uma API experimental que pode ser usada diretamente para ler o valor de uma promessa ou contexto dentro de um componente ou gancho (que é sua única limitação conhecida por enquanto ).
O gancho use é muito versátil e também pode ser usado no lugar de useEffect, pois pode ser usado para busca assíncrona de dados. Isso ajuda a
obtenha um bloco de código mais organizado e conciso.

Advertência: Não é um substituto para useEffect porque ainda tem suas próprias limitações que _useEffect _irá executar sem limites.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

useActionState(): Este é um novo gancho que ajuda a gerenciar mudanças de estado. Ajuda a gerenciar o estado pendente, tratamento de erros e final
atualizações de estado. O useActionState _funciona como o _useReduce _pois recebe dois(2) parâmetros: a função a ser chamada quando o formulário é enviado, e um _initialState, e retorna um array contendo três(3)valores: o state, que agora é o estado atual se houver uma mutação de estado, uma nova ação (formAction) que pode ser passada como um suporte em nosso componente de formulário para chamar a ação do servidor e _isPending _que retorna um valor _booleano se ou não o o formulário é enviado.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState   1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    

A partir deste exemplo, o incrementFunction adiciona 1 ao estado toda vez que o botão é clicado. O initialState sendo 0, e então aumenta para 1 no primeiro clique do botão, alterando assim o state para 1, e para cada outro clique no botão adiciona 1 ao último estado do componente.

useOptimistic() gancho:

Este é um novo gancho que permite aos usuários ver o resultado de suas ações antes mesmo de as páginas carregarem completamente. As páginas são renderizadas de forma otimista para o usuário, mesmo quando o servidor ainda está no modo de busca de dados.

Com a esperança de que a busca de dados seja bem-sucedida, o React exibe o resultado pretendido para o cliente e, quando a busca de dados falha, o React reverte para o valor do estado anterior para não exibir dados incorretos . Esta ação singular ajuda na exibição rápida e contínua dos dados, melhorando assim a experiência do usuário.

useFormStatus():

Como o nome indica, useFormStatus nos fornece o status do nosso formulário ou campos de formulário. Este gancho não aceita nenhum parâmetro, mas com certeza retorna 4 objetos:

pendente: retorna um valor booleano: true ou false. Ele retorna true quando o formulário é enviado e false quando o formulário é enviado.

dados: Quando o formulário é enviado com sucesso, podemos obter as informações do usuário ou objeto do campo do formulário assim:

(formData.get("name"))
(formData.get("address"))

método: O método padrão de um formulário é GET, salvo indicação em contrário. Podemos obter o método do nosso formulário com .method. Quando estamos enviando um formulário, uma propriedade de método string deve ser especificada como POST.

action: Esta é uma referência à função que será passada para a propriedade action em nosso elemento .

O useFormStatus deve sempre ser chamado de um elemento ou de um componente que é renderizado dentro de um .

Há mais algumas atualizações sobre as quais não posso escrever, então você não fica entediado de ter que ler tanto. Você pode clicar no site React Docs para verificar algumas das outras atualizações.

Espero que você tenha se divertido aprendendo comigo.

Faça bem em me seguir se você gostou dos meus artigos.

Obrigado e tenham uma ótima semana pela frente, meus amigos.