Validar Uso de Context Utilizando un Hook Personalizado y useContext React Hook
¿Qué ocurre si el usuario de un componente que utiliza la api Context y el hook useContext para definir sus componentes compuestos, renderizara uno de sus componentes fuera del componente principal?
SI esto ocurriera, un error sería emitido ya que el componente no podrá acceder a los valores del contexto proporcionado por el proveedor correspondiente.
Existen dos opciones para solucionar este problema, una es utilizar valores por defecto y la otra es crear una validación. En este ejemplo implementamos la segunda opción utilizando un hook personalizado para encapsular la lógica necesaria y compartirla entre los diferentes componentes compuestos.
Instructor: [0:00] Nuestro componente utiliza la api Context y el hook useContext para definir nuestros componentes compuestos y compartir el estado. Pero, ¿qué pasarìa si el usuario renderizara uno de los componentes compuestos fuera del componente principal Wizard, que implementa el acceso a Wizard Context Provider?
[0:16] Podemos revisarlo simplemente moviendo uno de estos componentes fuera del componente principal. Veremos un mensaje de Error, indicando que no es posible leer la propiedad activePageIndex desde undefined. Esto ocurre porque nuestro componente WizardPages intenta acceder a activePageIndex, utilizando Destructuring para el hook useContext, que lee los valores desde el Provider más cercano ascendente en el árbol. Como no hay ningún Provider, emitirá error.
[0:42] Una forma de evitar este problema es que utilicemos valores por defecto para los valores del contexto activePageIndex. Usamos y las dos funciones goNextPage y goPrevPage, hacemos funciones no operativas. Esto evitarìa el error, pero el componente no funciona como se espera.
[0:57] Otro método que podemos utilizar es simplemente una validación y emitir un mensaje de error. Para esto, crearé una función llamada useWizardContext que englobará el uso del hook useContext. Efectivamente, aquì estoy creando un hook personalizado. Primero, haremos uso del hook useContext, accediendo a WizardContext, que retornará el valor completo del contexto.
[1:17] Ahora con un simple bloque if, reviso si Context es nulo o no. En caso de ser nulo, se emite un Error con un mensaje diciendo que el componente compuesto no puede ser renderizado fuera del Wizard padre. En caso contrario, simplemente se retorna el contexto.
[1:31] Ahora solo quiero utilizar este nuevo hook. Para eso, reemplazo todas las Y+ en useContext en el listado de componentes compuestos por el uso de useWizardContext y se puede ver el nuevo mensaje de error.
[1:42] En resumen, he utilizado un hook personalizado para encapsular la lógica necesaria para validar que un componente compuesto que utiliza el contexto Wizard Context sea realmente renderizado dentro del árbol de Wizard Context Provider. Para esto, reviso si el valor de Context está definido y, en caso de no estarlo, se emite un mensaje de error. Otra estrategia es proveer valores por defecto al contexto, pero en ocasiones esto no tiene sentido. Podemos bien, esconder el problema.