Explain The New React Context API Like I'm Five

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:

• It's never been officially stabilized, so there's no guarantee it won't change.
• It doesn't interact nicely with the shouldComponentUpdate lifecycle hook.
• A lot of the complexity has to be dealt with by the developer, rather than React itself.

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 the connect 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 :)