React context in client components in NextJS

Introduction

React context lets you share data easily between components without passing props down many levels. It helps keep your app organized and clean.

You want to share user login info across many parts of your app.

You need a theme (like dark or light mode) available everywhere.

You want to manage language settings globally.

You have a shopping cart that many components need to access.

You want to avoid passing props through many layers of components.

Syntax

NextJS

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [state, setState] = useState();

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const context = useContext(MyContext);
  // use context.state or context.setState
}

createContext makes a new context object.

Provider wraps components that need access to the shared data.

Examples

This example shares a theme string and a way to change it.

NextJS

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

function Button() {
  const { theme } = useContext(ThemeContext);
  return <button>{`Current theme is ${theme}`}</button>;
}

This example shares user info and shows a greeting if logged in.

NextJS

const UserContext = createContext(null);

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
}

function Profile() {
  const { user } = useContext(UserContext);
  return <div>{user ? `Hello, ${user.name}` : 'Not logged in'}</div>;
}

Sample Program

This is a simple counter app using React context. The count state is shared through context. The button increases the count, and the updated count shows immediately.

NextJS

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext(0);

function CountProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

Important Notes

Always wrap components that use context inside the matching Provider.

Context is great for global or app-wide data, but avoid overusing it for local state.

In Next.js client components, use 'use client' directive at the top if needed.

Summary

React context shares data easily without passing props everywhere.

Use a Provider to wrap components that need the shared data.

Access context data inside components with useContext hook.