React documentation says:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

I will try to explain this API in simple words.
When to use context?
If you need to pass one shared prop to many components. This prop is “global” for a tree of React components. The right term for this is – prop drilling.
Context API & Redux
Actually, React context API’s purpose is more or less same as Redux’s purpose. What’s the most important is simplicity. Context API is much simpler than Redux.
const {Provider, Consumer} = React.createContext(defaultValue);
const ContextName = React.createContext();

With this we will have {Provider, Consumer} pair. When React renders a context Consumer, it will read the current context value from the closest matching Provider above it in the tree. The defaultValue argument is only used by a Consumer when it does not have a matching Provider above it in the tree.
Provider & Consumer – Roles
Provider is React component that allows Consumers to subscribe to context changes. Consumer is React component that subscribes to context changes and use that.
Note: You can find full code of this example here.
In this example, we will create context and use it with two consumers. Those consumers will change background and font color in div dynamically according to value user pass through input field in provider.
Firstly, we need to create context with default value.
const ColorContext = React.createContext("#FFFF66");
After that we will create Provider:
class ColorProvider extends React.Component {
  state = { color: "#FFFF66" };

  getColor = event => {
    var targetValue =;
      this.setState(({ color }) => ({
      color: targetValue

  render() {
    return (
      <ColorContext.Provider value={this.state.color}>
        <input type="text" value={this.state.color} onChange={this.getColor} />

As you can see, we define Provider as ContextName.Provider, in this case ColorContext.Provider. But we must also pass props to children components by using {this.props.children} – this is important. From this point, our consumers can use value Provider pass.
class ColorConsumer extends React.Component {
  render() {
    return (
        {color => <div style={{ backgroundColor: color }}>{color}</div>}

As you can see, we define Consumer as ContextName.Consumer, in this case ColorContext.Consumer. After that, he can use value Provider passed to this component – in this case – it’s color. However, Consumer will use that value (prop) only if it’s child of Provider, so we must create proper tree in our rendering component, like:

  <ColorConsumer />

The newest React Context API is perfect solution for passing down props to children components, without explicitly passing it from parent component. Also, it’s great for props drilling when you don’t want to play around with much more complex and exhausting Redux or MobX.