Esta semana, hablaremos sobre las nuevas actualizaciones y ganchos de React 19. Después de haber revisado y utilizado algunas de estas nuevas actualizaciones, solo puedo estar de acuerdo en que han simplificado algunas de las actividades rigurosas que realizan los desarrolladores al crear aplicaciones, especialmente aplicaciones interactivas relacionadas con formularios.

Únase a mí y permítanos explorar algunas de estas nuevas actualizaciones.

Compilador de React: El compilador de React selecciona su código de React, lo traduce a un código JavaScript para el navegador y administra el estado de su componente o interfaz de usuario. Esta acción singular ayuda a optimizar el rendimiento de su aplicación.

Si está familiarizado con el gancho useMemo, el gancho useCallback y React.Memo, comprenderá que ayudan a memorizar (almacenar valores o funciones para usos futuros) sus componentes, para que no tengan que volver a utilizarlos. renderizar cuando no hay cambios de estado. Cuando hay cambios de estado, React vuelve a renderizar el componente en cuestión y sus hijos, y cuando no hay cambios en su código, el componente permanece como está manteniendo la memoria, el valor y el estado anteriores en el componente o gancho para el futuro. usos; optimizando así el rendimiento de sus componentes. Esto es exactamente lo que hace el compilador React automáticamente, sin tener que llamar manualmente a ninguno de los ganchos antes mencionados.

Acciones de formulario: Una de las mayores ventajas de usar React es la administración y mutación del estado, y esto sucede principalmente cuando usamos elementos. Los formularios nos ayudan a crear y manejar la interactividad del usuario de manera más efectiva.

Con acciones de formulario, no necesitas controladores de eventos como onSubmit y onChange para efectuar la mutación de datos en vivo; en su lugar, podemos pasar una propiedad acción al elemento

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

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

Con este enfoque, no necesitamos la aplicación de useState para mutar datos a través de event.target.value; en cambio, en myFunction podemos obtener los datos mutados a través de un argumento.

Significa que desde el elemento de nuestro formulario, tenemos que establecer un atributo de nombre. Usar este método significa que permitimos que React maneje el formulario en sí a través del Objeto de formulario Native React en lugar de cambiar manualmente el estado a través de controladores de eventos.

Componentes del servidor: React 19 permite que los componentes se representen en un servidor antes de agruparlos, en un entorno separado de la aplicación cliente o la configuración del servidor SSR. Los componentes del servidor no son los mismos que SSR (renderizado del lado del servidor), sino un entorno de servidor separado en React Server Components.
Esta característica permite que los componentes se rendericen previamente antes de tiempo, lo que da como resultado una visualización de contenido rápida y un tiempo de carga mejorado.

Metadatos: React 19 permite metadatos flexibles. Los desarrolladores pueden administrar el título, la descripción y otras metaetiquetas de componentes individuales a través del componente DocumentHead. Esto ayudará a mejorar el SEO (optimización de motores de búsqueda).

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

React 19 tiene una serie de nuevos ganchos, algunos nuevos, otros una mejora de los ganchos existentes. Analicemos sobre ellos a continuación.

El gancho use(): El gancho use es una API experimental que se puede usar directamente para leer el valor de una Promesa o contexto dentro de un componente o gancho (que es su única limitación conocida por ahora ).
El gancho de uso es muy versátil y también se puede usar en lugar de useEffect, ya que se puede usar para la recuperación de datos asincrónica. Esto ayuda a
lograr un bloque de código más ordenado y conciso.

Advertencia: No reemplaza useEffect porque todavía tiene sus propias limitaciones de que _useEffect _se ejecutará sin límites.

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 es un nuevo gancho que ayuda a gestionar los cambios de estado. Ayuda a gestionar el estado pendiente, el manejo de errores y el final
actualizaciones de estado. El useActionState _funciona como el _useReduce _en el sentido de que recibe dos (2) parámetros: la función que se llamará cuando se envía el formulario y un _initialState, y devuelve una matriz que contiene tres (3) valores: el state, que ahora es el estado actual si hay una mutación del estado, una nueva acción (formAction) que se puede pasar como accesorio en nuestro componente de formulario para llamar a la acción del servidor, y _isPending _que devuelve un valor _booleano si el se envía el formulario.

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 (
    

En este ejemplo, la incrementFunction agrega 1 al estado cada vez que se hace clic en el botón. El initialState es 0, y luego aumenta a 1 con el primer clic del botón, cambiando así el estado a 1, y por cada dos clics en el botón se agrega 1 al último estado del componente.

usar gancho Optimistic():

Este es un nuevo gancho que permite a los usuarios ver el resultado de su acción incluso antes de que las páginas se carguen por completo. Las páginas se muestran de manera optimista al usuario incluso cuando el servidor todavía está en su modo de obtención de datos.

Con la esperanza de que la recuperación de datos sea exitosa, React muestra el resultado deseado al cliente y, cuando falla la recuperación de datos, React vuelve al valor del estado anterior para no mostrar datos incorrectos. . Esta acción singular ayuda a una visualización rápida y fluida de los datos, mejorando así la experiencia del usuario.

useFormStatus():

Como su nombre lo indica, useFormStatus nos da el estado de nuestro formulario o campos de formulario. Este gancho no toma ningún parámetro, pero seguro devuelve 4 objetos:

pendiente: Esto devuelve un valor booleano: verdadero o falso. Devuelve verdadero cuando se envía el formulario y falso cuando se envía el formulario.

datos: Cuando el formulario se envía correctamente, podemos obtener la información del usuario u objeto del campo del formulario como este:

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

método: El método predeterminado de un formulario es GET, a menos que se indique lo contrario. Podemos obtener el método de nuestro formulario con .método. Cuando enviamos un formulario, la propiedad del método de cadena debe especificarse como POST.

acción: Esta es una referencia a la función que se pasará al accesorio de acción en nuestro elemento .

El useFormStatus siempre debe llamarse desde un elemento o un componente que se representa dentro de un .

Hay bastantes actualizaciones más sobre las que realmente no puedo escribir, así que no te aburrirás de tener que leer tanto. Puede hacer clic en el sitio web de React Docs para ver algunas de las otras actualizaciones.

Espero que te hayas divertido mucho aprendiendo conmigo.

Haz bien en seguirme si te gustaron mis artículos.

Gracias y que tengáis una excelente semana por delante, amigos míos.