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