Published under React.
When people think of context in a React JS app, they often think of global state. "I need to manage the theme my app is set to use, I can use context for this." While this isn't wrong, context can be used for so much more than that use case. I like to think of it as "encapsulated state".
Think of context as a component in your tree that can provide props directly to any child below it. Combine that with hooks, and you can write some clean APIs for your components. Let's take a look at a simple example using a Modal component.
Here's a look at a modal that accepts an
onClose prop which should be called to close the modal. The modal manages its own transition system, so when closing the modal, the modal's custom
closeModal needs to be called. After the transition is complete, the passed-in
onClose prop will be called.
Here's the corresponding component that uses the
Modal component above:
The example above is about as simple as I could make it. However, in a real application the button in
SomeComponentModalContent may be multiple levels deep, and you'd have to pass
closeModal down through the tree.
My proposal for an improved API is to introduce a
ModalContext, which will expose the
closeModal function. Let's start with the context implementation.
Note that there's a
useModal hook in there! That will be important in a moment.
Here's the updated
Modal component, using the new context:
ModalHeader no longer accept the
closeModal prop? Since we've exposed the
closeModal function via context, you no longer have to pass it as a prop anymore. Instead,
ModalOverlay would look like this:
You might argue that the example above is worse off because
closeModal was a prop before, so we've now added a line by using the hook. You would be right, but let's take a look at an example with nested components, the
By using context here, we can create a generic
ModalCloseButton component that can be used anywhere within a modal to close the modal. No need to worry about ensuring you have access to the correct props because the
ModalCloseButton component is responsible for pulling what it needs out of context.
Let's continue by looking at how the parent of the
Modal component changes.
Instead of passing
closeModal down however many levels of the tree, we leave it to the component needing
closeModal to grab it out of context.
I've tried to make the examples as simple as possible. In the real world application I pulled this from, the
ModalContext exposes more than just a
We recently built a custom
Stepper component which allows the user to flow through a series of steps in a form. We used the context/hook pattern to allow custom components in each step to control the flow of the
Stepper component. The API is so much simpler than prop passing because the custom components only pull what they need out of a hook. Don't need anything? Don't use the hook!