ReactJS | useContext Hook with Example

Hello ReactJS Friends,

In today’s guide, I will explain useContext Hook in ReactJS with examples.

When you want to use additional features of React, at that time React hooks are used. There are various types of hooks in ReactJS. Learn about useEffect Hook and useState Hook in ReactJS. 

For now, let’s learn about useContext Hook in React with Example.

React useContext Hook

The React context provides data to components through the components tree and eliminates the need to pass props manually at every level. Global data like global state, theme, services, user settings, and more can be managed by the context in React.

Example of ReactJS useContext Hook:

Step 1: Firstly, you need to import useContext hook in your app.js

import { createContext } from 'react';
const Context = createContext('Default Value');

Step 2: Add below function in your ((project-file)/app.js)

function Main()
{
    const value = 'My Context Value';
    return (
        <Context.Provider value={value}>
        <MyComponent />
        </Context.Provider>
    );
}

Step 3: You can use useContext hook in your file as given below

import { useContext } from 'react';
function MyComponent()
{
    const value = useContext(Context);
    return <span>{value}</span>;
}

Conclusion:

This was all about the useContext hook in ReactJS. Share the tutorial with React developers and stay updated for more tutorials.

Happy Coding!