Create a Wizard Component Using Compound Components and useContext React Hook

Share this video with your friends

Send Tweet
Published 2 years ago
Updated a year ago

Our Wizard component lacks flexibility for the user, it does not allow modifying the way its components are rendered. But we can refactor our code to grant this flexibility by using the design pattern known as compound components and a shared state between them. To implicitly share this state we use React's Context API together with the useContext hook that offers a simple and direct way to consume this shared state. With this, the component provides flexibility to the user allowing him to decide how to render each element of the wizard.

Daniel Villegas
Daniel Villegas
~ a year ago

I am really learning a lot from this tutorial! But I think there is a bit of confusion because the code you write in the videos doesn't always match the source code on the github files. The pace of the videos is fine but the jump cuts make it hard to follow. Fortunately, the Github repo is very clear and the code is super clean. Thank you for this content!

Lucas Pereira Caixeta
Lucas Pereira Caixeta
~ 3 weeks ago

I agree with what Daniel said too.