The days of relying on external libraries for managing light non-local state are coming to a close. React's new Context API will be the go-to solution for sharing state simply™️.
⚛️ Just merged: a new context API! ⚛️— Andrew Clark (@acdlite) January 25, 2018
- Statically typeable
- Propagates through shouldComponentUpdate->false
- Future-proof: works with async React features
- render props (so hot right now)
Available in the next minor release.https://t.co/HoeUSBaRGU pic.twitter.com/y0bqa3lkhD
In this post, I'll describe Context by creating a simple theme-switching component:
Since Context won't be live until React 16.3, I'll be using the
create-react-context polyfill. Whenever you see
create-react-context referenced, you can basically substitute it with
Creating a Context instance is as simple as calling a function with a default value
Here's an example:
API (Aesthetic Programming Interface)
The context API consists of only two parts: the
Provider and the
Consumer. Simple, right? I think so.
Provider enables any child component in its tree to access its value. Context's
Provider has less emphasis on global state than Redux and can be used to as little or as large a scale that you'd want: just like MobX.
In the following snippet, I set up a React Component that manages the state that our Provider will pass to those willing to consume it:
Consumers must be descendants of its context's Provider for it to access the value it wants. It's similar to
connect in Redux and
observer in MobX, but in the form of a component with the famed Render Prop pattern instead of being a higher-order component.
Putting it all together
Now that we've established a core understanding of how Context works, play around with some code and toggle some themes!
If you found this post useful, make sure to follow me on Twitter and share this with your friends! ⚡️