How to avoid the prop-drilling problem in react, with Context

In addition to inserting react memo and loadable, last but not least, we have adopted the use of Context to prevent the drilling-prop problem.

In order to use it, you can create manually a context (we reccomended to use the Context folder) e.g.

import React from 'react';

const Context = React.createContext(null);

export default Context;

The initial value is optional.

After you should set a Component Provider:

import React from 'react';
import Context from 'Context/Context';

const A = () => (
  <Context.Provider value="green">
    <D />

The Provider in this case, show only the D compnent, without passing any props.

Finally you can create the Consumer component, and consume the context.

import React from 'react';
import Context from 'Context/Context';

const C = () => (
    {value => (
      <p style={{ color: value }}>
        Hello World

You can learn more, by read this Context article, by Robin Wieruch