En este artículo, analizaremos el uso de ReactDOM.unstable_batchedUpdates dentro de un caso de prueba, específicamente en Zustand, una popular biblioteca de administración de estado para React. También desglosaremos la prueba y explicaremos cómo las actualizaciones por lotes mejoran el rendimiento en React al minimizar las reproducciones innecesarias.

Comprensión del caso de prueba

Aquí está el caso de prueba que examinaremos:

Este caso de prueba está escrito para verificar que se pueden aplicar actualizaciones por lotes cuando se usa Zustand con el sistema de renderizado de React.

Desglosando el caso de prueba

1. Configuración de la tienda Zustand: El primer paso consiste en crear una tienda Zustand usando la función de creación:

const useBoundStore = create(
  (set) => ({   
  count: 0,   
  inc: () => set((state) => ({ count: state.count   1 })), }))

Aquí, la tienda mantiene un estado simple con una propiedad de recuento inicializada en 0 y una función inc para incrementar el recuento. La función set es la forma que tiene Zustand de actualizar el estado, similar a setState en React.

2. Componente contador: El componente contador utiliza useBoundStore para recuperar el recuento actual y la función inc:

const { count, inc } = useBoundStore()

Este componente se suscribe al estado de la tienda y cualquier cambio en el recuento hará que se vuelva a representar con el nuevo valor.

3. Usando ReactDOM.unstable_batchedUpdates para rendimiento: Dentro del gancho useEffect, la función inc se llama dos veces dentro de un bloque ReactDOM.unstable_batchedUpdates:

useEffect(() => {   
  ReactDOM.unstable_batchedUpdates(() => {     
    inc()     
    inc()   
  }) 
}, [inc])

Aquí es donde ocurre la magia. Normalmente, cada llamada a inc() activaría una actualización separada, provocando dos renderizaciones. Sin embargo, al envolver estas llamadas en unstable_batchedUpdates, React puede procesarlas juntas en una única actualización, lo que da como resultado un solo renderizado. Esto optimiza el rendimiento al reducir la cantidad de renderizados, lo cual es especialmente útil en aplicaciones críticas para el rendimiento.

4. Representar el componente y afirmar el resultado Finalmente, se renderiza el componente y la prueba espera a que el recuento llegue a 2:

const { findByText } = render(
       
    >, 
)  

await findByText('count: 2')

Esta afirmación garantiza que después de dos incrementos, el recuento se actualice correctamente y se represente como "recuento: 2".

¿Qué es ReactDOM.unstable_batchedUpdates?

ReactDOM.unstable_batchedUpdates es un método proporcionado por React que permite procesar múltiples actualizaciones de estado en un solo ciclo de renderizado. De forma predeterminada, las actualizaciones por lotes de React se activan dentro de los controladores de eventos (por ejemplo, evento de clic), lo que significa que si actualiza varios estados en respuesta a una interacción del usuario, React representará el componente solo una vez. Sin embargo, fuera de los controladores de eventos (como dentro de setTimeout o useEffect), las actualizaciones no se agrupan automáticamente.

Pero esto ha cambiado después de React 18. A continuación se muestran las capturas de pantalla seleccionadas de react.dev

Tenga en cuenta que la documentación sugiere que las actualizaciones dentro de tiempos de espera, promesas, controladores de eventos nativos o cualquier otro evento se agruparán de la misma manera que las actualizaciones dentro de los eventos de React. Pero en este caso de prueba de Zustand, las actualizaciones por lotes se aplican dentro de useEffect`. Aquí es donde unstable_batchedUpdates se vuelve útil. Obliga a React a agrupar múltiples actualizaciones de estado en un solo renderizado, incluso fuera de contextos controlados por eventos, minimizando los renderizados y mejorando el rendimiento.

Ejemplo:

Sin actualizaciones inestables_batched:

inc()  // triggers one render
inc()  // triggers another render

Con actualizaciones inestables_batched:

ReactDOM.unstable_batchedUpdates(() => {
  inc()  // triggers only one render for both updates
  inc()
})

El método está etiquetado como "inestable" porque no forma parte de la API pública oficial de React, pero aún se usa ampliamente en la comunidad para optimizaciones de rendimiento. Puede volverse más estable o integrado como parte de las nuevas capacidades de renderizado simultáneo de React en el futuro.

Dato curioso: la versión 4.5.5 de Zustand usa la versión: 19.0.0-rc.0

¿Por qué utilizar ReactDOM.unstable_batchedUpdates en Zustand?

Zustand es una biblioteca de administración de estado liviana que funciona con el ciclo de vida de los componentes de React. Aunque Zustand maneja eficientemente las actualizaciones de estado, el sistema de reactividad de React activará renderizados cada vez que cambie el estado. En escenarios donde ocurren múltiples cambios de estado en un período corto, usar ReactDOM.unstable_batchedUpdates puede evitar múltiples renderizaciones y actualizaciones por lotes, lo que permite una experiencia de usuario más fluida y eficiente.

En el caso de prueba proporcionado, llamar a inc dos veces dentro de una actualización por lotes garantiza que el recuento solo se actualice una vez, lo que lo hace más eficiente en comparación con ejecutar cada actualización individualmente.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar los conceptos arquitectónicos avanzados de base de código utilizados en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

Mejora las habilidades de tu equipo con nuestros cursos avanzados basados ​​en arquitectura de base de código. ¡Comuníquese con nosotros en [email protected] para obtener más información!

Referencias:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L175C7-L175C39

2. https://dev.to/devmoustafa97/do-you-know-unstablebatchedupdates-in-react-enforce-batching-state-update-5cn2

3. https://dev.to/jackbuchananconroy/react-18-what-s-changed-automatic-batching-13ec

4. https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching

5. https://github.com/pmndrs/zustand/blob/v4.5.5/package.json#L246C4-L247C32