React 17 se centró en mejorar los fundamentos, pero hay algunas cosas importantes que se agregaron en React 18. En este artículo, repasaremos algunas de las últimas actualizaciones sobre cómo comenzar con las nuevas características interesantes en React 18 alpha.

Instale React 18 alpha: npm install react@alpha react-dom@alpha

Aquí está la lista de algunas actualizaciones.

1. Nueva API raíz
2. Suspenso
3. SuspenseList
4. useDeferredValue
5. Lote automático

En React 18 hay una nueva API raíz.

Anteriormente en nuestro método reactDOM.render, usamos para pasar nuestro componente App, luego document.getElementById y nuestro elemento raíz. Entonces estábamos renderizando nuestro componente de aplicación en nuestro elemento raíz en la página.

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

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

Suspenso

Como su nombre, Suspense suspende algo hasta que esté listo para ser renderizado.

En la versión anterior de react, el siguiente código daría como resultado que ReadyComponent se montara inmediatamente y se llamaran sus efectos.

<Suspense fallback={<Loading />}>
    <ComponentWaitingForData />
    <ReadyComponent />
</Suspense>

En referencia al código anterior, ahora no montará ReadyComponent, sino que esperará a que ComponentWaitingForData se resuelva primero.

SuspenseList

Una SuspenseList exceptúa dos prop. 'revelOrder' y 'tail'.

'revelOrder' es una de las opciones de configuración de SuspenseList. Puede ser indefinido, juntos, hacia adelante y hacia atrás.

• indefinido (predeterminado): revela a los niños a medida que se resuelven los tirantes.
• juntos : revele a los niños juntos, una vez que se hayan resuelto todos los tirantes.
• hacia adelante : dejar a los niños de arriba a abajo, indiferentes a los tirantes. orden de resolución
• al revés : renderizar a los niños de abajo hacia arriba, indiferentes al orden de resolución de la suspensión

<SuspenseList revealOrder="forwards" >
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

<SuspenseList revealOrder="forwards" tail="collapsed">
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

useDeferredValue

'UseDeferredValue' es un gancho que devolverá una versión diferida del valor pasado. Toma el valor del estado y un tiempo de espera en milisegundos. Devolverá una versión diferida del valor que puede "quedarse atrás" durante la mayoría de los tiempos de espera.

import { useDeferredValue } from "react";
const [text, setText] = useState("react js");
const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

Lote automático

Hay grandes mejoras en el procesamiento por lotes automático. En las versiones anteriores de React, se usa para agrupar múltiples actualizaciones de estado en una para reducir las repeticiones innecesarias. El problema fue que se hizo solo en controladores de eventos DOM y no en promesas, tiempos de espera u otros controladores.

Veamos el siguiente código sobre cómo se produce el procesamiento por lotes con versiones anteriores de React.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);
    
    const handleClick = () => {
        setCount(count + 1); //No re-render
        setColor(count % 2 === 0 ? "Green" : "Red"); //No re-render
        // Now re-renders once at the end (this is batching)
    }
return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

Veamos el siguiente código donde se produce el procesamiento por lotes. En el siguiente código, el procesamiento por lotes funciona bien con React 18, pero las versiones anteriores de React no lo procesarán.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);    const handleClick = () => {
        Promise.resolve().then(() => {
            setCount(count + 1); //Re-render
            setColor(count % 2 === 0 ? "Green" : "Red"); //Re-render
        });
    }    return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

Referencia - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

Pensamientos finales:

Acabamos de conocer algunas de las actualizaciones interesantes en la versión alfa de React 18. Como desarrollador de JavaScript, me gustaron mucho las actualizaciones y estoy emocionado de ver cómo se ve la versión beta de React 18.

Gracias por estar hasta el final 🙌. Si disfrutaste este artículo o aprendiste algo nuevo, apóyame haciendo clic en el botón de compartir a continuación para llegar a más personas y / o sígueme en Twitter para ver algunos otros consejos, artículos y cosas que aprendo y comparto allí.