Notes on react context API

More often than not, developers end up sharing the parent components state with child components by passing them through props.

This is often referred as "prop drilling".

The problem with prop drilling is that - you end up repeating the props for all the components between the parent and the child component. This leads to performance issues as a lot of these components gets rendered unnecesarily.

Components become polluted by props which they are not even using ( except for just passing then through).

To optimize this state sharing ( and avoid prop drilling ), react introduced context api.

img credit

Using Context API

1. Create Context Define a context with createContext(defaultValue).

import { createContext } from 'react';
const ThemeContext = createContext(); // Default value optional

import { createContext } from 'react';
const ThemeContext = createContext(); // Default value optional

2. Provider Component Wrap components with Context.Provider to supply data.

<ThemeContext.Provider value={value}>
  {children}
</ThemeContext.Provider>

<ThemeContext.Provider value={value}>
  {children}
</ThemeContext.Provider>

3. Consume Context Use useContext(Context) or Context.Consumer to access data.

const { theme } = useContext(ThemeContext);

const { theme } = useContext(ThemeContext);