preloader

React 18: Novedades


Tiempo de lectura: 2 minutos
  • Sunday, 1 de May 2022

Modo concurrencia

Ahora React puede interrumpir un renderizado si ve que no es importante. Así se asegura de dejar la UI siempre disponible para la interacción del usuario.

Antes

1
2
3
4
5
    import ReactDOM from 'react-dom';

    ReactDOM.render(
    <App />,
    document.getElementById('root'))

Ahora

1
2
3
4
5
    import {createRoot} from 'react-dom/client'

    createRoot(
        document.getElementById('root')
    ).render(<App />)

Actualización por lotes

Evita renderizados innecesarios al encontrar más de una actualización del estado y los apila automaticamente.

Antes de React 18

1
2
3
4
    setTimeout(() => {
        setCount(c = c + 1)
        setFlag(f => !f)
    }, 1000)

renderiza dos veces el componente

Ahora con React 18

1
2
3
4
    setTimeout(() => {
        setCount(c = c + 1)
        setFlag(f => !f)
    }, 1000)

El componente se renderiza una vez

Transiciones

Puedes indicar actualizaciones de estado que tienen menos prioridad.

1
2
3
4
5
6
7
8
9
    import {startTransition} from 'react';

    //Actualización normal y prioridad alta
    setInputValue(input)

    //Actualizaciones no prioritarios y pueden interruptirse
    startTransition(() => {
        seSearchQuery(input)
    }

Suspense en el servidor

Ahora Suspense funciona en el servidor y soporta esperar datos.

1
2
3
4
5
6
7
    <Layout>
        <Navbar />
        <Sidebar />
        <Suspense fallback={<Spinner />}>
        <Comments />
        </Suspense>
    </Layout>

Nuevos hooks: useId y useDeferredValue

useID

Te permite crear un identificador único en el cliente y en el servidor.

1
2
3
4
5
6
7
    function Checkbox() {
        const id = useId();
        return(
        <div>
            <input id={id} type="checkbox" name="useId" />
        </div>
    )}

useDeferredValue

Permite que los valores se actualicen más tarde de manera que la UI se actualiza al momento y el resto de valores cuando queramos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    function App() {
        const [text, setText] = useState("hola");
        const deferredText = useDeferredValue(text, {timeoutMs: 2000})

        return (
        <div>
            <MyFirstList />
            <MySecondList text={deferredText} />
        </div>
    )

Shall we chat?


If you prefer, schedule a call directly with us