Recently React got a new version of Context and I've seen a lot of hype about it in Twitter but I'm not sure if I understand the use case of Context, or why this is a needed change. Can anyone help me understand how it works/what it solves?
Thank you!
Top comments (1)
Usually, when you're passing data around in your React app, you do it via props - data goes down, callbacks go up. This is a nice model, and it works for a lot of use-cases. But what if you've got something at the top of your component tree that needs to be made available way further down? You could just pass it via props, but then every component has to know about it, which is messy! The context API is a way around this - it allows a nested child component (the consumer) to access data made available by a parent component (the producer).
The issues with the existing API are:
shouldComponentUpdate
lifecycle hook.The RFC intends to finally solidify the API into something that's documented and easy to use, so that people can feel confident writing code around it.
An example of where this is used in the real world - Redux's
Provider
component makes the data store available via context, and theconnect
component (which you wrap around your own components) pulls data out of it.Obligatory contrived metaphor:
Ten people are all standing on a ladder, one above the other. The person at the top wants to pass something down to the person at the bottom. They could each take it in turns to pass the object down to the person below them - but sometimes it's much easier for them to just drop it and let the person at the bottom catch :)