Context API in React

What is Context API in React

Context API is a concept of sending data from one parent component to its children components. It is used to reduce Prop Drilling in the react app. Now your question is what is prop drilling?

Prop Drilling

Suppose a person wants to go from the topmost ladder to the lowest ladder, he will go down the stairs one by one.

Similarly in react, if the lowest component wants to use a prop that is defined in its topmost parent component then that prop is shared among the components between them and these intermediate components send the prop to the lowest component without processing this prop.

Why Context API

Prop drilling can make the code more difficult to read and maintain, and can also make it harder to refactor the components later on. So context API can be used to send data without using prop drilling.

How to use Context API

First of all we need to keep some keywords in our mind in context API -

• createContext- it is used to create a context object
• Provider- it is used to wrap the components that will use the props.
• useContext - it is used to fetch data from context object

Create a Context.js file

import { createContext } from "react"
const MyContext = createContext("");
export default MyContext

Create a MyComponent.js file

import { useContext } from "react";
import MyContext from "./Context";

function MyComponent(){
    const {count, setCount} = useContext(MyContext);

    return(
        <>
            <h1>MY Component</h1>
            {count}
            <button onClick={()=>setCount(count+1)}>Click</button>
        </>
    )
}


export default MyComponent;

App.js file

In this file, we will use Context API's Provider to wrap the MyComponent and some values are sending as value prop to wrapped component.

import { useState } from "react";
import MyComponent from "./MyComponent";
import MyContext from "./Context";

function App() {
  const [count, setCount] = useState(0)


  return (
    <>
      <div>
        <MyContext.Provider value={{count, setCount}}>
          <MyComponent/>
        </MyContext.Provider>
      </div>      
    </>
  )
}
export default App