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.
//Context/Context
import React from 'react';
const Context = React.createContext(null);
export default Context;
The initial value is optional.
After you should set a Component Provider:
//Components/A
import React from 'react';
import Context from 'Context/Context';
const A = () => (
<Context.Provider value="green">
<D />
</Context.Provider>
);
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.
//Components/C
import React from 'react';
import Context from 'Context/Context';
const C = () => (
<Context.Consumer>
{value => (
<p style={{ color: value }}>
Hello World
</p>
)}
</Context.Consumer>
);
You can learn more, by read this Context article, by Robin Wieruch