Introduction to React Context API

Avoid props drilling to child components

From React’s version 16.3.0, Context API is officially released to avoid props drilling to child components.

In order to understand use of React context and its application, lets look into what complication its trying to fix.

In our React application, there can be global properties such as language, or theme colour that will configured at top most component in <App /> . These properties will be used by child components & also grand child components. Here in above example <MenuItem> element may need value of colour for styling, and language for localization. However these properties had to be passed through <Menu /> component, even though its not used in <Menu /> .

<App /> → <Menu /> → <MenuItem />

Thereby each of these global properties, have to be mapped as props from intermediate components even though it may not be used in-between. This is called props drilling and may introduce redundant mapping of props for complex application for multiple properties.