Use useEffect React Hook to Define the Total Number of Pages for the Wizard Component
Our Wizard component provide a good amount of flexibility but in the previous step we had to forcibly add a prop to the main component to know the total number of steps or pages that the user want to render. The prop steps.
We can get rid of that and "automate" the retrieval and calculation of this data by using the useEffect hook.
useEffect is the hook used by React to execute side effects that is any action required to synchronize an internal and external state. In this case we want to use the useEffect hook to emit the effect of calculate the steps when the component is rendered.
Instructor: [0:00] User component has a simple API created with compound components where each of them has a singular responsibility. The wizard pages component to the limited content to be rendered together with the navigation buttons.
[0:12] We had to add the prop steps to know the number of pages to render, but this can cause errors if the user defines a different number than the actual total of elements to render. It is possible to obtain this value automatically using the hook, useEffect. For this, we will modify the code of the wizard pages component.
[0:31] The first thing is to obtain the number of wizard steps. For this, we will use the React.Children API and the count method that will return the number of elements of the children prop. Now, it's necessary to use this value as part of the state.
[0:46] Here, the useEffect hook comes into play. Since we need to update the state of the wizard component when obtaining the total of the steps, that is when mounting wizard pages, useEffect accept two arguments.
[0:58] First, a function that will define the effect to be triggered, and as the second argument, an array of values. This list tells React when to trigger the effect based on the changes in the array values. If these values do not change, the effect will not run again. We will pass the value of a step as dependencies.
[1:17] Now, it is necessary to define which effects useEffect will emit. A step is a state value which is used by all the components of our wizard, so we need to update this value in the shared state. For this, we will modify our main wizard component so that this handles a new state.
[1:35] We will use the hook useState again to maintain the state of steps and an update function called setSteps. Now, we can remove this prop and add the updater function to the context. Now, from wizard pages, we can trigger the effect to update the state.
[1:53] First, we get the update function, setSteps, from the context and use it as part of the effect using the value of the steps variable and passing setSteps as a dependency of the hook. This will emit a change in the state when rendering with our pages and storing the number of pages in the step state.
[2:12] Finally, we remove the use of this prop and our wizard works correctly, but now, it will have a simple API. In conclusion, we can use the useEffect hook together with useState to update the state based on a variable value.
[2:26] The dependency list of the useEffect hook tells React when to run the effect or not. The comparison that useEffect makes on its dependencies is a comparison by value to define whether or not to execute the effect.