Use useEffect React Hook to Define the Total Number of Pages for the Wizard Component

Share this video with your friends

Send Tweet

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.

~ 2 years ago

I see that React.useCallback() was introduced in the code for the Wizard, although with no explanation attached (likely an unintentional omission?)

~ 2 years ago

Also, starting with this lesson, there's no apparent synchronization with the github pages (and so folders in Github do not correspond with the different steps/chapters in this tutorial). That is unfortunate, as it would be great to have all the chapters in sync (that is, it's very useful to have the complete code in github for the first two chapters in this tutorial). Nonetheless, the content is very high quality and useful to follow.