How to implement useContext Hook in a Functional Component ?
Last Updated :
28 Apr, 2025
In React, the useContext hook is used to consume values from a context. Context in React is a way to share values like themes, authentication status, or any other global state between components without explicitly passing the props through each level of the component tree.
Syntax of useContext Hook:
const authContext = useContext(initialValue);
Steps to implement useContext Hook in React App:
Step 1: Create a React application using the following command:
npx create-react-app react-app
Step 2: After creating your project folder, i.e., react-app, move to it using the following command:
cd react-app
Project Structure: It will look like the following:
File StructureThe updated dependencies in the package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"run": "^1.4.0",
"web-vitals": "^2.1.4"
}
Approach to implement useContext Hook in Functional Component:
- MyContext is created using createContext.
- MyProvider is a component that wraps its children with MyContext.Provider and provides a value to the context.
- MyComponent is a functional component that uses the useContext hook to access the value from the context.
- Finally, in the App component, we use MyProvider to wrap MyComponent, establishing the context for the component tree.
Example: Below is the code showing the example of use of the useContext to display the value from the context.
CSS
/* App.css */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
.main{
color: green;
}
h2{
color: blue;
}
JavaScript
// App.js
import React, { createContext, useContext } from 'react';
import './App.css'
// Create a context
const MyContext = createContext();
// Create a provider component
const MyProvider = ({ children }) => {
const value = "Hello! This is from Context!";
return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};
// Functional component that uses the context
const MyComponent = () => {
// Use the useContext hook to access the context value
const contextValue = useContext(MyContext);
return (
<div>
<h1 className='main'>GeeksForGeeks </h1>
<h2>Example of UseContext</h2>
<h1>{contextValue}</h1>
</div>
);
};
const App = () => {
return (
<MyProvider>
<MyComponent />
</MyProvider>
);
};
export default App;
To Run the Application, type the following command in terminal:
npm start
Output: Type the following link in your browser http://localhost:3000/
Implementing useContext Hook in a Functional Component
Similar Reads
How to use useMemo Hook in a Functional Component in React ? In React development, optimizing performance is crucial for delivering responsive and fast user experiences. One way to achieve this is by using the `useMemo` hook. In this article, we'll explore what `useMemo` is, why it's beneficial, and how to use it effectively in functional components. Table of
3 min read
Role of Hooks in Functional Components. Hooks in React are like new tools that make building components easier. Before, we had to use classes, which were like following strict instructions. But with hooks, we can do the same thing more simply and flexibly directly inside functional components. It's like having a magic connector for buildi
3 min read
How to create a Functional Component in React? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
Advantages of using Functional Components with React Hooks In the past, React mainly used class-based components as its building blocks. However, functional components, which are essentially JavaScript functions that receive props (inputs) and return JSX (rendered content), were limited in their capabilities. With React 16.8 and the introduction of hooks, f
4 min read
How to create Functional Components in React ? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read