useContext() in React JS

React JS

Today we will discuss about useContext() in React JS. In previous article we have seen how to use context API in React JS. Basically useContext is a part of the hooks in the React. UseContext method is used to pass data from one component to another component without using props in functional component.

If we want to share data between functional component then we can use useContext() in React JS. We can also use context provider & context consumer in functional component but useContext() can not use in class component. UseContext() method is more efficient to share the data between functional components in React JS. To use the useContext() in React we follow the below steps.

First of all we will create a context file in which we create the context using createContext (provided by React).

MyContext.js

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

In the above code we have created context. Now we will provide the context value using provider.

Parent.js

import React, { useState } from 'react'
import Child from './child.js'
import { MyContext } from "./contextFile.js";

const Parent = () => {
    const [tutorial, setTutorial] = useState('JavaScript Tutorial');
    return (
        <>
            <MyContext.Provider value={tutorial}>
                <Child />
            </MyContext.Provider>
        </>
    )
}
export default Parent

Child.js

import React  from 'react'
import SubChild from './subChild1.js'
const Child = () => {
    return (
        <SubChild />
    )
}
export default Child

In the above code we have provide the context value using provider then import child & subchild component. Now we consume the context value using useContext() method in subchild component.

SubChild.js

import React, { useContext } from 'react'
import { MyContext } from "./contextFile.js";

const SubChild = () => {
    const notes = useContext(MyContext)
    return (
        <h1>
            Tutorial is: {notes}
        </h1>
         // <MyContext.Consumer>
         //     {context => <h1>Tutorial is: {context}</h1>}
         // </MyContext.Consumer>
    )
}
export default SubChild

In the above code we have useContext method to get the data from MyContext. Here we can also use context consumer to get the data.

App.js

import React from 'react';
import './App.css';
import Parent from './components/parent.js'
 
function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}
 
export default App;

Output –

Context API in React JS

So in this article you have seen, how to use useContext() in React JS. UseContext is used only with in functional component. We can’t use useContext in class component because useContext is part of the Hooks in React and hooks are used in only functional component.

So using this article anyone can easily understand useContext() in React JS.

If you want to add anything or improve this article or you find anything wrong/incorrect in this article then please leave a message using below comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − 9 =