En aplicaciones React grandes y complejas, puede ser beneficioso usar múltiples contextos para manejar diferentes partes del estado global. Los contextos anidados permiten una mejor organización y separación de los datos, pero también pueden introducir complejidades adicionales. Este capítulo explorará cómo trabajar con contextos anidados de manera eficiente.

¿Qué son los Contextos Anidados?

Los contextos anidados implican envolver un componente en múltiples Providers, cada uno proporcionando un contexto diferente. Esto permite que diferentes partes del estado global estén disponibles en distintos niveles del árbol de componentes.

Ventajas de Usar Contextos Anidados

1. Separación de Preocupaciones: Permite gestionar diferentes aspectos del estado por separado, mejorando la claridad y mantenibilidad del código.
2. Optimización de Performances: Minimiza el riesgo de re-renderizaciones innecesarias al aislar cambios en partes específicas del estado.
3. Reutilización: Facilita la reutilización de componentes en diferentes partes de la aplicación con distintos contextos.

Ejemplo de Contextos Anidados

Veamos un ejemplo sencillo de cómo anidar contextos.

jsx

En este ejemplo, UserContext.Provider y ThemeContext.Provider están anidados para proporcionar sus valores a Page y sus componentes hijos.

Consumo de Múltiples Contextos en un Componente

Cuando un componente necesita consumir varios contextos, useContext puede ser llamado múltiples veces.

Ejemplo

jsx

En este ejemplo, UserAndTheme consume tanto UserContext como ThemeContext para renderizar sus datos.

Consideraciones de Performance

1. Memoización: Utiliza useMemo y useCallback para memoizar los valores del contexto y las funciones de actualización, minimizando los renders innecesarios.
2. Fragmentación del Estado: No combines demasiados datos en un solo contexto. Divide el estado en múltiples contextos según sea necesario.
3. Composición de Contextos: Aprovecha los Higher Order Components (HOCs) y otros patrones de composición para organizar y combinar múltiples contextos de manera más efectiva.

Ejemplo Avanzado con Memoización

jsx

En este ejemplo, useMemo se utiliza para memoizar los valores del contexto, mejorando la performance de la aplicación.

Conclusión

Los contextos anidados ofrecen una manera flexible y organizada de gestionar múltiples partes del estado global en una aplicación React. Al entender cómo anidar y consumir contextos de manera efectiva, puedes mejorar tanto la claridad del código como la performance de tu aplicación. En el próximo capítulo, discutiremos cómo el Context API afecta y mejora la performance de tu aplicación.