Modo estricto

El modo estricto tiene algunas adiciones, como un nuevo comportamiento llamado “efectos estrictos”. Esto nos permite invocar efectos como mount y unmount. Crea un entorno para corregir el comportamiento con Fast Refresh durante el desarrollo, no solo buscando componentes más resistentes. También hay una “API fuera de la pantalla” que se está construyendo actualmente.

Una API fuera de la pantalla permitirá un mejor rendimiento ocultando componentes en lugar de desmontarlos, manteniendo el estado y aún llamando a los efectos de mount / unmount.

Procesamiento automático por lotes

Ahora hay importantes mejoras con el procesamiento por lotes automático. Primero veremos el rendimiento.

Ya agrupado, múltiples actualizaciones de estado en una para minimizar las repeticiones innecesarias. Sin embargo, elementos como Promises, tiempos de espera u otros controladores no lo aprovecharon, ya que solo se limitaron a los controladores de eventos DOM.

Todo esto cambia con React 18, que generará actualizaciones de estado por lotes sin límites, siempre que sea seguro hacerlo. ¿El resultado, pregunta?… Esto crearía un mejor desempeño sin ninguna participación adicional.

Renderizado concurrente

La renderización simultánea es definitivamente una de las que debe buscar, ya que es, con mucho, la actualización más grande con React 18.

Antes de este nombre, se llamaba “modo concurrente”. El cambio de nombre significa la habilitación de la adopción gradual de características concurrentes. Esto nos permite adoptar funciones simultáneas sin reescribir el código y hacerlo a su propio ritmo.

Nuevas API

Con React 18, obtenemos varias API nuevas que vienen en muchas formas.

startTransition — su propósito es detectar actualizaciones de estado como transiciones, haciendo que su manejo no sea urgente.

useDeferredValue — este enlace le dará un elemento diferido del valor pasado, que seguirá al original, hasta el tiempo de espera proporcionado.

SuspenseList — este componente está destinado a manejar casos en los que, por ejemplo, los datos obtenidos pueden llegar en un orden impredecible. Gracias a <SuspenseList>, se puede orquestar un componente y mantendrá la interfaz de usuario bajo control.

API raíz

createRoot reemplazará la función de render. La nueva API es la puerta de entrada para acceder a las nuevas funciones de React 18. Su objetivo es fomentar la adopción gradual y facilitar las comparaciones de rendimiento potencial.

Aquí hay algunas actualizaciones nuevas que llegarán a React 18 y espero que esté emocionado por ellas y los beneficios y la eficiencia que pueden brindar a los desarrolladores de React.