React Context API: Advantages & Disadvantages

In this article, I will briefly explain what Context API is, how it is used, its advantages and disadvantages.

What is Context API?

Context API is a feature added to React with version 16.3, and it enables users to share information across components. Compared to the props system, Context API creates global variables, which can be used throughout the entire app.

Advantages & Disadvantages

Advantages

• It is built in, meaning that no additional package needs to be installed.
• It requires minimal setup, easy to start and go.

Disadvantages

• More suitable for static data, rather than dynamic data.
• Debugging can be a real problem, especially in highly nested components.

Note: Context API usage and syntax differs between functional and class based components. Same logic, different approach.

Steps to Use Context API in Functional Components

1- Create a contexts folder in the src folder. This folder will keep all your context files.

2- Create a file called <YourFileName>Context.js. In that file:

import {createContext} from 'react';
const YourContext = createContext('this is the initial value');
export default ThemeContext;

3- Then, in the component where you will provide this context information to other components we will use Provider property to pass data. The value keyword is a special keyword which will hold the value you want to pass to other components. This value will be available even inside the deeply nested children of the ChildComponent below.

import YourContext from "../contexts/YourContext.";
import ChildComponent from "../components/ChildComponent";
function App(){
return(
   <YourContext.Provider value={'Hello world'}>
     <ChildComponent/>
   </YourContext.Provider>
)}
export default App;

4- Lastly, you will need to import and explicitly use that context. In the ChildComponent:

import {useContext} from "react";
import YourContext from "../contexts/YourContext"
function ChildComponent(){
  const MyContext = useContext(YourContext);
}
export default ChildComponent;

Thats it folks! Go a head and give it a try. See the magic happen. Developers, who prefer using class based components, follow these steps to use Context API in your projects.

Using Context API with Class Based Components

1- The first three steps are the same. Go ahead and apply them.

2- Open the component which recieves the Provider value. With class based components, there are two ways to use (consume) Context API value. If you are going to use only a single Context API file go ahead and do this: (I said single, because we will use this provided context with this.context reference. Also, note that contextType keyword is a special keyword and it is a must.)

import YourContext from "../contexts/YourContext"
import React, { Component } from 'react'
export default class ChildComponent extends Component {
static contextType = YourContext;
render() {
return (
<div>
  {this.context}
</div>
)}}

3- If you are going to have multiple context files, follow the steps below. We will use the consumer property on the context we want to use.As a result, this consumer property will return the context value inside a callback function’s parameter. You can assign that value to another value or write some html directly inside it and return that code block right away.

Note that this one looks a little messy code to me, since it can get really complicated in a short while. Also, you can wrap other contexts inside other contexts.

import YourContext from "../contexts/YourContext"
import React, { Component } from 'react'
export default class ChildComponent extends Component {
render() {
return (
<div>
   <YourContext.Consumer>
     {(value)=> updateValue(value)}
  </YourContext.Consumer>
</div>
)}}

Conclusion

Thats all folks! Context API definitely cannot replace Redux or the props system and that is not why it is there in the first place. It is a lightweight, easy to use and a complementary source to the other tools we have. I personally use it a lot with theme switching. Hope you had fun and learned a thing or two!

Keep coding…

Resources

https://www.loginradius.com/blog/engineering/react-context-api/#:~:text=The%20React%20Context%20API%20is,to%20state%20management%20using%20Redux.

Working with the React Context API

https://blog.logrocket.com/react-context-api-deep-dive-examples/