Utilizar useEffect React Hook para Definir el Total de Paginas del Componente Wizard
Nuestro componente Wizard ofrece flexibilidad pero en el paso anterior tuvimos que forsozamente agregar una prop al componente principal para conocer el total de pasos o páginas que se desean renderizar. La prop steps.
Podemos eliminar su uso y "automatizar" la obtención de este dato al utilizar el hook useEffect.
useEffect es el hook utilizado para ejecutar "efectos secundarios" o en general cualquier acción que se requiera ejecutar al momento de renderizar un componente.
Matías Hernández: [0:00] Nuestro componente wizard tiene una API sencilla, creada con componentes compuestos donde cada uno de ellos tiene una responsabilidad única. El componente WizardPages para contener el contenido de renderizar y los botones de navegación.
[0:12] Pero tuvieron que agregar la prop step para conocer el número de páginas a renderizar y esto puede crear errores y no suele utilizar un valor diferente al real. Es posible obtener este valor de forma automática utilizando el hook useEffect. Para esto modificaremos el código del componente WizardPages.
[0:27] Lo primero es obtener el número de pasos del wizard. Para esto usaremos la API React.Children y el método count, que retornará el número de elementos de la props.children. Ahora es necesario utilizar este valor como parte del estado.
[0:42] Aquí entra en juego el hook useEffect, ya que necesitamos actualizar el estado del componente wizard al momento de obtener el total de steps, es decir, al montar WizardPages. UseEffect acepta dos argumentos. Primero, una función que definirá el efecto a emitir y como segundo argumento, un arreglo de variables.
[0:58] Este listado le indica a React los valores provenientes del props o estados de los que depende la ejecución del efecto. Si estos valores no cambian, entonces el efecto no se ejecutará nuevamente.
[1:08] Pasaremos como dependencias el valor de steps. Ahora, es necesario definir qué efecto emitirá useEffect. Steps es un valor de estado, utilizado por todos los componentes compuestos de nuestro wizard por lo que necesitamos actualizar este valor en el estado compartido.
[1:23] Para esto modificaremos nuestro componente principal wizard para que maneje un nuevo estado. Utilizaremos nuevamente useState para mantener el estado de steps y una función actualizadora llamada setSteps(). Ahora podemos eliminar esta prop y a agregar la función actualizadora al contexto. Ahora, desde WizardPages podemos emitir el efecto para actualizar el estado.
[1:45] Primero, obtenemos desde el contexto la función actualizadora setSteps y la utilizamos como parte del efecto usando el valor de la variable steps y pasando setSteps como dependencia del hook. Esto emitirá un cambio en el estado al momento de renderizar WizardPages almacenando dentro del estado steps el número de pages obtenidas.
[2:08] Finalmente eliminamos el uso de step prop y nuestro wizard funciona correctamente, pero ahora va a ver una API más sencilla.
[2:14] En conclusión, podemos utilizar el hook useEffect en conjunto o en useState para actualizar el estado en base a un valor variable. El listado de dependencias del hook useEffect le indica cuando ejecutar el efecto. La comparación que useEffect hace en sus dependencias es una comparación por valor para determinar si ejecutar o no el efecto.