React context simplified

Context is a react object that provides an easier way to pass data through the component tree without having to use props and drilling down the data at each stage.

Illustration of context: Images from Scrimba React course

Illustration of context: Images from Scrimba React course

The disadvantage of using props is that you need to pass data from one branch of the component to the other until it is passed to the child component. This pipeline of data passing known as drilling can be frustrating.

Context can be thought of as a state management tool that can be used to manage different states in an app such as light/dark mode, and for some people, this has been used to replace state management tools like redux.

To use context we use the createContext method which comes with the React package. This is called by using the following syntax

React.createConetext() or : import {createContext}

This method comes with two components, the Provider and the Consumer. The Provider is used to hold the state and pass it down to the Consumer, which in turn passes it to the component to be rendered.

In order to see how context is being used in practice, we would use context to make our app have a light mode and a dark mode. We can see how this is being used in the following lines of code to make the context object available to the entire app.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

const ThemeContext = React.createContext()

ReactDOM.render(
<ThemeContext.Provider>
    <App/>
<ThemeContext.Provider>,
document.getElementById("root")
)

index.js

For best practices, it’s not advisable to have the context object created in the index.js file, as this would lead to bugs. Thus we shall create a different file for our context and instantiate it there which would be exported to our index.js file. This is illustrated below

import React from "react"
const ThemeContext = React.createContext
export default ThemeContext

themeContext.js

We can now call the theme context in the index.js file by importing it from the themeContext.js file and wrapping it around the App component as seen below with a value provided to the Provider component. The value provided in this case is either dark or light which would be styled in the index.css file to reflect the dark and light mode.

import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ThemeContext from "./themeContext"

ReactDOM.render(
<ThemeContext.Provider value="dark">
    <App/>
</ThemeContext.Provider>, 
document.getElementById("root")
)

index.js: updated file in which the Context provider is being imported from another file

In the following lines of code, we would illustrate how to use the Consumer component of a context method. The file below is the Header file of the dark/light mode theme project, we would be using the Consumer context to pass the state to the className in order to change the theme color based on the value of the parent Provider.

import React, {Component} from "react"
import ThemeContext from "./themeContext"

class Header from extends Component{
        static contextType = ThemeContext()
        render(){
                const theme = this.context
                return(
                        <header className={`${theme}-theme`}>
                                <h2> Light {theme}</h2>
                        </header>=\
                )
            }
}

header.js

I hope this was helpful in your quest to understand context in React. Happy hacking as you evolve into a superb frontend engineer.

For further reading check out the official documentation from React here.