React Context Basics

Context in React

In React data is passed top-down through props and it may get cumbersome for certain types of props, specially for the props that are used multiple times throughout different components at different levels of the dom tree.

Usually, these props are regarded as the global state of the application, and global state management in large or complex applications is one of the biggest headaches for most react developers and they find third-party state-management libraries like redux, mobX extremely helpful for this purpose.

However, in cases where the data is private to a specific part of the system and is used for a small set of components context is more suitable than overusing of Redux.

What is Context

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

Context is designed to handle the global state of the application such as the current authenticated user, theme, or preferred language.

When should we use context?

Context provides the necessary mechanism for those data that need to be accessible by many components at different nesting levels.

For example, many modern websites let users choose dark or light themes, and In the react application to do so, instead of passing the active theme as props to each component, creating a themeContext will be a preferable approach.

Let’s dig Into the Context

Context API has 3 steps:-

1. Create a context.
2. Use that context from the component that needs the data.
3. Provide that context from the component that specifies the data.

Let’s get started. we have to create a context first. Context is basically a store that will hold the values of the common state.

Step 1

Say we want to create a context to pass the active theme to different components of our site

import { createContext } from 'react';
export const ThemeContext = createContext({theme: 'dark'});

The only argument required for createContext is the default value.

Step 2

Import the useContext Hook from React and our ThemeContext:

import { useContext } from 'react';
import { ThemeContext } from './themeContext.js';

export default function DummyComponent() {
  const activeTheme = useContext(ThemeContext);
  //rest of the component
}

useContext is a Hook. Just like useState and useReducer, we can only call a Hook immediately inside a React component (not inside loops or conditions). useContext tells React that the DummyComponent wants to read the ThemeContext.

Step 3

Now we know how to create and use Context but we also need to specify which components will be able to use our ThemeContext .

In order to specify which component group will be able to use our context we need to pass the context from a common parent component as following

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext.js';

export default function ParentComponent({ children }) {
  const theme = useContext(ThemeContext);
  return (
    <section className="section">
      <ThemeContext.Provider value={theme}>
        {children}
      </ThemeContext.Provider>
    </section>
  );
}

Updating data passed via Context

Often, we want the context to change over time. To update context, combine it with state. Declare a state variable in the parent component, and pass the current state down as the context value to the provider.

function MyPage() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
       //JSX
    </ThemeContext.Provider>
  );
}

Bonus

This whole implementation is available in this Github Repo

Changing Theme using Context