React 18 ha salido, estas son las novedades

Ya ha salido React 18 y estas son sus características más importantes:

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

				
					import ReactDOM from 'react-dom';

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

Ahora

				
					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

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

//renderiza dos veces el componente

Ahora con React 18

				
					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.

				
					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.

				
					<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.

				
					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.

				
					function App() {
const [text, setText] = useState("hola");
const deferredText = useDeferredValue(text, {timeoutMs: 2000})

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