Context API

The Context API in React is a built-in feature that allows to share state or values across component tree without having to pass props manually at every level.

Get Danushanthi Konesalingam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It’s often used for:

• User authentication data (e.g: logged-in user info)
• Theme (dark/light)
• Language settings
• Global form or UI state

It follows three main steps

1. Create the Context

import React, { createContext } from ‘react’;

export const UserContext = createContext();

2. Provide the Context

export const UserProvider = ({ children }) => {
const [user, setUser] = React.useState(null);

return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
};

Then wrap this in app.js or main.js

import { UserProvider } from ‘./UserContext’;

function App() {
return (
<UserProvider>
<HomePage/>
</UserProvider>
);
}

3. Use the Context

import { useContext } from ‘react’;
import { UserContext } from ‘./UserContext’;

const HomePage = () => {
const { user } = useContext(UserContext);

return <div>Welcome, {user?.name}</div>;
};