¿Qué es ReactJs?

ReactJS es una librería front-end basada en componentes, gratuita y de código abierto, responsable únicamente de la capa de vista de la aplicación. Esta biblioteca JavaScript sirve para construir interfaces de usuario basadas en componentes de interfaz de usuario. Facebook se encarga de su mantenimiento. React ha proporcionado facilidad desde su lanzamiento.

También te puede interesar: «Construye una aplicación CRUD simple usando React y Node»

React utiliza un paradigma declarativo que facilita el razonamiento de tu aplicación y objetivos para ser eficiente y flexible. Ilustra vistas simples para cada estado de una aplicación, y React actualizará y renderizará eficientemente el componente correcto cuando los datos se transformen. La vista declarativa hace que el código sea más fácil de leer y sin esfuerzo en el estado de depuración.

¿Cuál es el objetivo principal de este artículo?

Este artículo arroja luz sobre las próximas características que estarán disponibles en React-18, sus aplicaciones y otras cosas esenciales que vale la pena comprender.

Cuando se trata de lanzar una nueva versión de un lenguaje de programación, los desarrolladores a menudo sienten pánico. Siempre existe el temor de actualizar o desmantelar la configuración existente. En este caso, ¡no debería tener ansiedad en absoluto! La nueva versión no incluirá cambios importantes. Por lo tanto, no requiere nuevas habilidades.
La última versión viene con out-of-the-box funciones de mejora en forma de lotes automatizados, nuevas APIs (por ejemplo, startTransition), y un nuevo servidor de streaming de renderizado con soporte integrado para React.lazy en el momento en que será lanzado y listo para rodar para los desarrolladores.

Concurrent Rendering en React 18

Entre las nuevas características, la concurrencia es el principal cambio en la última versión de React 18. La concurrencia define la capacidad de ejecutar varias tareas a la vez. Supongamos que un usuario está haciendo clic o escribiendo en un componente React y simultáneamente se está reproduciendo una animación en un componente en otro componente React. En esta situación, la animación se renderiza dentro del contexto de React mientras el usuario está tecleando o pulsando los botones. Por otro lado, en las versiones anteriores, React operaba todas estas llamadas hook, llamadas a funciones, etc., simultáneamente, y tardaba un tiempo prolongado en procesarlas todas. Más detalles en el React-18 Release announcement.

Así que, en un momento dado, el usuario tenía la sensación de que la aplicación se estaba atascando. Definitivamente, este incidente tuvo un impacto destructivo en los usuarios. Para resolver este problema, los desarrolladores de React vienen con la idea de Concurrent Rendering que proporciona API de transición por la que React está ganando algún comando de este bucle de eventos para el usuario.

La Transition API

Como se mencionó anteriormente, la API Transition proporciona control sobre la concurrencia con la nueva versión de React 18. La API startTransition permite a los desarrolladores indicar qué acciones pueden bloquear el hilo y causar retraso en la pantalla. Supongamos que un usuario obstruye una transición; React lanzará el trabajo de renderizado obsoleto que no estaba terminado y renderizará sólo la última actualización. Permítanme darles un ejemplo rápido del uso de la API startTransition a continuación.

import { startTransition } from 'react';
setInputValue(input);
startTransition(() => {
    setSearchQuery(input);
});

Las transiciones te permiten controlar la mayoría de las interacciones con rapidez, aunque conlleven cambios importantes en la interfaz de usuario. También evitan que pierdas tiempo renderizando contenido que ya no es relevante.

React 18 también incluye un nuevo hook llamado useTransition. Usando este hook el desarrollador puede mostrar un cargador mientras la transición está pendiente. Ayuda a indicar al usuario que la aplicación está procesando su entrada y mostrará los resultados pronto. Sigue el siguiente ejemplo.

import { useTransition } from'react';
const [isPending, startTransition] = useTransition();
const callback = () => {
    setInputValue(input);
    startTransition(() => {
       setSearchQuery(input);
  });
}

Batching automático en React

El batching ofrece un mejor rendimiento computacional. Se produce cuando ReactJS agrupa varias actualizaciones en un único estado de renderizado. Batching es algo de lo que los desarrolladores normalmente no tienen que preocuparse, pero es conveniente saber lo que está pasando detrás de la escena. Cada vez que alguien utiliza setState para cambiar una variable dentro de cualquier función, en lugar de hacer un render en cada setState, React en su lugar recoge todos los setState y luego los ejecuta juntos. Es un batching automático. Por favor, echa un vistazo al siguiente fragmento de código para entender bien el proceso.

import { useState, useLayoutEffect } from "react";
import * as ReactDOM from "react-dom";
function App() {
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(false);
    function handleClick() {
       console.log("=== click ===");
       fetchSomething().then(() => {
           setCount((i) => i + 1);
           setFlag((f) => !f);
       });
    }
    return (
    <div>
    <button onClick={handleClick}>Click and Count</button>
    <h1 style={{ color: flag ? "red" : "green" }}>{count}</h1>
    <LogEvents />
    </div>
 );
}

Novedades y mejoras de la API de raíz

La API Root funciona como un puntero para las estructuras de datos de nivel superior de la aplicación que React utiliza para seguir un árbol de renderizado. La API raíz heredada y ReactDOM.createRoot son las dos nuevas API que se introducirán en React 18. La última API raíz llamada ReactDOM.createRoot añadirá todos los refinamientos a la aplicación y permitirá las características del modo concurrente. Permítanme mostrarles la diferencia entre la antigua y la nueva API raíz a continuación.

Ejemplo (la antigua API raíz)

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
ReactDOM.render(<App />, document.getElementById('root'));

Ejemplo (la nueva API raíz)

import ReactDOM from 'react-dom';
import App from 'App';
const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);

API de suspensión y renderización del lado del servidor

Las siglas SSR significan Server-Side-Rendering. Es un componente que permite a los desarrolladores desarrollar HTML a partir de componentes React directamente en el servidor y compartir el HTML con los usuarios. Los usuarios pueden ver una vista previa de la página a través de Server-Side-Rendering incluso antes de cargar el paquete javascript. Sin embargo, estos paquetes javascript tardan a veces más tiempo de lo habitual en procesar el paquete. Este período de tiempo es el tiempo de hidratación. La última versión de React reducirá el tiempo de hidratación. Por lo tanto, permite HTML streaming directamente en el SSR. ¿Te preguntas qué es HTML streaming? Permítanme ponerlo de esta manera: Streaming HTML indica que el servidor puede enviar trozos de tus componentes a medida que se renderizan. Se realiza mediante el uso de la API Suspense, donde usted seleccionaría qué partes de su aplicación tardarán más en cargarse y cuáles deben renderizarse instantáneamente. Por favor, eche un vistazo al siguiente ejemplo.

<Page>
    <Article />
    <Suspense fallback={<Loader />}>
         <Comments />   
    </Suspense></Page>

Colaboración con la Comunidad

Para esta versión, el equipo de desarrolladores de React está intentando algo distinto: han invitado a un panel de expertos, desarrolladores, autores de bibliotecas y educadores de toda la comunidad React a unirse a su Grupo de Trabajo React 18 para aportar comentarios, hacer preguntas y trabajar en el proyecto. La misión del Grupo de Trabajo de React 18 es preparar el ecosistema para la adopción fluida y progresiva de React 18 por parte de las aplicaciones y frameworks existentes. Los debates del grupo de trabajo se celebran en GitHub Discussions y están abiertos al público. Los miembros del grupo de trabajo de React pueden realizar aportaciones, plantear preguntas y debatir ideas. El equipo central también compartirá los resultados de la investigación en el repositorio de conversaciones. El blog oficial de React comunicará cualquier información crítica a medida que se acerque la fecha del lanzamiento estable.

¿Cómo empezar hoy mismo con React 18 Alpha?

La etiqueta @alpha se utiliza para publicar nuevas alphas en npm regularmente. El commit más reciente de nuestro repositorio principal se utiliza para crear estas versiones. Cuando una característica o corrección de errores se fusiona, una versión alfa se publicará el siguiente día de la semana.

Entre versiones alfa puede haber cambios significativos en el comportamiento o en la API. Recuerde que las versiones alfa no son para aplicaciones de cara al usuario o de producción.