React Context API for State Management

Introduction

Managing application state well can make or break a React project. React offers several options for state management, and the Context API is one of the most flexible. But what exactly is the React Context API, and how does it differ from Redux, another popular state management library? This post covers both questions, along with the capabilities and limitations of the React Context API.

What is Context API in React?

Understanding the fundamentals of Context API

The React Context API arrived in React 16.3. It gives you a way to share data between components without manually passing props through every level of the component tree. That matters most when deeply nested components need shared data, like user authentication status, application themes, or language preferences.

The Context API is built on two core components:

1. <Provider>: This component makes data available to all descendant components. It accepts a value prop, which can be any data type you want to share, including objects or functions.
2. <Consumer>: The Consumer component reads the data provided by the nearest <Provider> in the component hierarchy.

Data shared through Context API looks like props, but it is available globally within the context. Any component that needs it can read it directly, with no explicit prop passing from parent to child.

When should you use Context API?

You might be wondering why Context API should be your choice over traditional prop-passing. There are several situations where it earns its place:

1. Eliminating prop drilling: In large, deeply nested component trees, manually passing props down multiple levels gets unwieldy and error-prone. Context API gives you one place to manage shared data instead.
2. Global state management: When your application needs to read and change data from several places, Context API lets you set up a global state that’s easy to maintain and update.
3. Themes and localization: Context API is a good fit for themes, user preferences, and localization settings, since those are usually needed in several sections of your application.
4. Authentication: If you need to retain user authentication status and make it accessible to different parts of your application, Context API offers an effective solution.

Building a simple state management system with Context API

Creating a new Next.js project

To demonstrate the capabilities of Context API, we’ll build a simple state management system using Next.js. First, let’s create a new Next.js project by running the following command:

1
# npm
2
npx create-next-app next-context-api
3

4
# yarn
5
yarn create next-app next-context-api
6

7
# pnpm
8
pnpx create-next-app next-context-api

Next, the command-line interface will prompt you to select a template for your project. For this tutorial, we’ll choose TypeScript as our preferred option.

1
? Would you like to use TypeScript? › No / Yes # Yes
2
? Would you like to use ESLint? › No / Yes # Yes
3
? Would you like to use Tailwind CSS? › No / Yes # Yes
4
? Would you like to use `src/` directory? › No / Yes # Yes
5
? Would you like to use App Router? (recommended) › No / Yes # Yes
6
? Would you like to customize the default import alias (@/*)? › No / Yes # Yes
7
? What import alias would you like configured? › @/* # keep the default

We’ll also install one additional dependency:

1
# npm
2
npm install --save-dev prettier prettier-plugin-tailwindcss
3

4
# yarn
5
yarn add --D prettier prettier-plugin-tailwindcss
6

7
# pnpm
8
pnpm add --save-dev prettier prettier-plugin-tailwindcss

Once the project is created, navigate to the project directory and start the development server by running the following command:

1
# npm
2
npm run dev
3

4
# yarn
5
yarn dev
6

7
# pnpm
8
pnpm dev

Cleaning up the project and organizing the file structure

Next, let’s clean up the project by removing the default files and folders that we won’t be using. We’ll also create a new folder structure to organize our project files.

1
Root
2
├── src
3
│   ├── app
4
│   │   ├── layout.tsx
5
│   │   └── page.tsx
6
│   ├── assets
7
│   │   ├── icons
8
│   │   │   └── favicon.ico
9
│   │   └── styles
10
│   │       └── globals.css
11
│   ├── components
12
│   │   ├── shared-state-child
13
│   │   │   └── index.tsx
14
│   │   ├── shared-state-grand-child
15
│   │   │   └── index.tsx
16
│   │   ├── shared-state-sibling
17
│   │   │   └── index.tsx
18
│   │   index.ts
19
│   └── providers
20
│       └── use-provider.tsx
21
├── .eslintrc.cjs
22
├── .gitignore
23
├── .npmrc
24
├── .nvmrc
25
├── .prettierrc.cjs
26
├── .yarnrc
27
├── next.config.mjs
28
├── package.json
29
├── postcss.config.cjs
30
├── README.md
31
├── tailwind.config.ts
32
├── tsconfig.json
33
└── yarn.lock

Creating a custom provider for Context API

Now, let’s create a custom provider for our Context API. First, we’ll create a new file called use-provider.tsx inside the providers folder. Then, we’ll add the following code to this file:

1
'use client';
2

3
import React, {
4
  type ReactNode,
5
  type Context,
6
  createContext,
7
  useContext,
8
  useState,
9
} from 'react';
10

11
const initialContext = <T,>() => new Map<string, T>();
12
const Context = createContext(initialContext());
13

14
type ProviderProps = {
15
  children: ReactNode;
16
};
17

18
export const Provider = ({children}: ProviderProps) => (
19
  <Context.Provider value={initialContext()}>{children}</Context.Provider>
20
);
21

22
const useContextProvider = <T,>(key: string) => {
23
  const context = useContext(Context);
24
  return {
25
    set value(v: T) {
26
      context.set(key, v);
27
    },
28
    get value() {
29
      if (!context.has(key)) {
30
        throw Error(`Context key '${key}' Not Found!`);
31
      }
32
      return context.get(key) as T;
33
    },
34
  };
35
};
36

37
export const useProvider = <T,>(key: string, initialValue?: T) => {
38
  const provider = useContextProvider<Context<T>>(key);
39
  if (initialValue !== undefined) {
40
    const Context = createContext<T>(initialValue);
41
    provider.value = Context;
42
  }
43
  return useContext(provider.value);
44
};
45

46
export const useSharedState = <T,>(key: string, initialValue?: T) => {
47
  let state = undefined;
48
  if (initialValue !== undefined) {
49
    const _useState = useState;
50
    state = _useState(initialValue);
51
  }
52
  return useProvider(key, state);
53
};

Let’s walk through the code above to see how it works. First, we create a new context using the createContext function. Then, we create a custom hook called useProvider that accepts two arguments: key and initialValue. The key argument is used to identify the context, while the initialValue argument is used to set the initial value of the context. Next, we create a custom hook called useSharedState that accepts the same arguments as the useProvider hook. This hook is used to create a shared state that can be accessed and modified by multiple components.

Using the custom provider in the application

Now, let’s use the custom provider we created in the previous step in our application. First, we’ll import the Provider component from the use-provider.tsx file. Then, we’ll wrap the Layout component with the Provider component. Finally, we’ll add the following code to the Layout component:

1
import '@/assets/styles/globals.css';
2
// Context API
3
import {Provider} from '@/provider/use-provider';
4
import type {Metadata} from 'next';
5
import {Inter} from 'next/font/google';
6
import React, {type ReactNode} from 'react';
7

8
const inter = Inter({subsets: ['latin']});
9

10
export const metadata: Metadata = {
11
  title: 'Next.js Context API',
12
  description: 'Next.js Context API example with TypeScript to manage state.',
13
};
14

15
type RootLayoutProps = {
16
  children: ReactNode;
17
};
18

19
export default function RootLayout({children}: RootLayoutProps) {
20
  return (
21
    <html lang={'en'}>
22
      <Provider>
23
        <body className={inter.className}>{children}</body>
24
      </Provider>
25
    </html>
26
  );
27
}

Creating a shared state

Now, let’s create a shared state using the useSharedState hook. First, we’ll create a new file called index.tsx inside the components/shared-state-child folder. Then, we’ll add the following code to this file:

1
'use client';
2

3
// components
4
import {SharedStateGrandChild} from '@/components';
5
// Context API
6
import {useSharedState} from '@/provider/use-provider';
7
import React, {Fragment} from 'react';
8

9
export const SharedStateChild = () => {
10
  const [count] = useSharedState<number>('count');
11

12
  return (
13
    <Fragment>
14
      <p className={'text-center text-xl font-semibold'}>
15
        Shared State Child: {count}
16
      </p>
17
      <SharedStateGrandChild />
18
    </Fragment>
19
  );
20
};
21

22
export default SharedStateChild;

Next, we’ll create a new file called index.tsx inside the components/shared-state-grand-child folder. Then, we’ll add the following code to this file:

1
'use client';
2

3
// Context API
4
import {useSharedState} from '@/provider/use-provider';
5
import React, {Fragment} from 'react';
6

7
export const SharedStateGrandChild = () => {
8
  const [count] = useSharedState<number>('count');
9

10
  return (
11
    <Fragment>
12
      <p className={'text-center text-xl font-semibold'}>
13
        Shared State Grand Child: {count}
14
      </p>
15
    </Fragment>
16
  );
17
};
18

19
export default SharedStateGrandChild;

Finally, we’ll create a new file called index.tsx inside the components/shared-state-sibling folder. Then, we’ll add the following code to this file:

1
'use client';
2

3
// Context API
4
import {useSharedState} from '@/provider/use-provider';
5
import React, {Fragment} from 'react';
6

7
export const SharedStateSibling = () => {
8
  const [count] = useSharedState<number>('count');
9

10
  return (
11
    <Fragment>
12
      <p className={'text-center text-xl font-semibold'}>
13
        Shared State Sibling: {count}
14
      </p>
15
    </Fragment>
16
  );
17
};
18

19
export default SharedStateSibling;

Creating a index.ts file inside the components folder and adding the following code to it:

1
export {default as SharedStateChild} from '@/components/shared-state-child';
2
export {default as SharedStateGrandChild} from '@/components/shared-state-grand-child';
3
export {default as SharedStateSibling} from '@/components/shared-state-sibling';

Updating the shared state from the parent component or page

Now, let’s update the shared state from the parent component. First, we’ll create a new file called index.tsx inside the app folder. Then, we’ll add the following code to this file:

1
'use client';
2

3
// Context API
4
// components
5
import {SharedStateChild, SharedStateSibling} from '@/components';
6
import {useSharedState} from '@/provider/use-provider';
7

8
export default function Home() {
9
  const [_, setCount] = useSharedState<number>('count', 0);
10

11
  const increment = () => setCount((prev) => prev + 1);
12
  const decrement = () => setCount((prev) => prev - 1);
13
  const reset = () => setCount(0);
14

15
  return (
16
    <main className={'flex h-screen flex-col items-center justify-center'}>
17
      <h1 className={'text-center text-4xl font-bold'}>Next.js Context API</h1>
18

19
      <p className={'text-center text-xl font-semibold'}>
20
        Count Example with Context API and TypeScript
21
      </p>
22

23
      <div className={'mt-8 flex flex-col items-center justify-center gap-4'}>
24
        <SharedStateChild />
25
        <SharedStateSibling />
26
        <div className={'flex flex-row items-center justify-center gap-4'}>
27
          <button
28
            type={'button'}
29
            className={
30
              'rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'
31
            }
32
            onClick={increment}
33
          >
34
            Increment
35
          </button>
36
          <button
37
            type={'button'}
38
            className={
39
              'rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'
40
            }
41
            onClick={decrement}
42
          >
43
            Decrement
44
          </button>
45
          <button
46
            type={'button'}
47
            className={
48
              'rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700'
49
            }
50
            onClick={reset}
51
          >
52
            Reset
53
          </button>
54
        </div>
55
      </div>
56
    </main>
57
  );
58
}

Testing the application

Finally, let’s test the application by running the following command:

1
# npm
2
npm run dev
3

4
# yarn
5
yarn dev
6

7
# pnpm
8
pnpm dev

If everything works as expected, you should see the following output:

Is Context API the same as Redux?

React Context API compared with Redux

Redux is a well-known state management library, and plenty of React applications use it. It gives you a structured, centralized way to manage application state. So is Context API just a Redux alternative? Here are the real differences between the two.

1. Complexity: Redux is known for strict architectural rules, and that cuts both ways. It enforces one-directional data flow and requires actions and reducers. That helps larger applications and feels like overkill on smaller projects. Context API is lighter and more flexible, with a simpler entry point, which suits applications with modest state management needs.

2. Ecosystem: Redux has a mature ecosystem with many extensions, middleware, and developer tools. It has been tested hard in the field and has a large community with answers for most problems. Context API is gaining popularity, but its ecosystem is not as broad. If you need the more complete toolset, Redux is still the preferred choice.

3. Performance: Redux does well on performance through memoization and efficient state updates. Context API on its own does not optimize as much. Bring in memoization helpers like reselect and useMemo, though, and you can get solid performance out of Context API too.

4. Learning curve: Redux has a steeper learning curve because of its strict conventions and the boilerplate that comes with them. Context API is more approachable, especially for developers new to state management in React. If you want something quick and uncomplicated, Context API is the one to reach for.

5. State size: For applications with large, tangled state structures, Redux gives you a clear, structured approach through reducers and actions. Context API fits applications with smaller and simpler state management needs.

Picking the right tool

The choice between Context API and Redux depends on what your application actually demands. On a small to medium project where you want simplicity and a short learning curve, Context API is a strong choice. For large applications with complex state management needs, where a mature ecosystem earns its keep, Redux is still the better option. Sometimes a mix works best: Context API for simpler local state inside specific components, Redux for the overall application state.

What is the problem with Context API in React?

Understanding the limitations of Context API

The React Context API has real limitations for state management. Here are the challenges you’re likely to run into when using it.

1. Propagation of updates: Context API re-renders every component consuming the context each time the provider’s value changes. With a deep component tree, that means re-renders you didn’t need. Memoization and component-level optimization ease it.

2. No built-in middleware: Redux offers middleware for managing side effects and asynchronous actions, which many applications need. Context API has no built-in middleware, so you either add libraries or write your own handling for side effects.

3. Debugging tools: Redux offers an extensive suite of developer tools that pay off when you are debugging. Context API has some developer tools, but not the same depth, so tracing data flow and debugging issues is harder.

4. Global vs. local state: Context API is mainly designed for sharing global state. If your application needs components with local state that shouldn’t be shared with the whole application, that is less straightforward with Context API. Redux, which can handle local component state, gives you more control there.

5. Handling complex state: For applications with complex state structures, Redux’s reducers and actions offer a clear and structured approach. With Context API you write more code to manage complex state well.

Frequently Asked Questions on Context API

Now that we’ve explored the fundamentals, compared Context API with Redux, and discussed its limitations, let’s address some common questions related to the React Context API:

Can Context API replace Redux for large applications?

It is technically possible, but Context API is usually not the best fit for large applications. Redux’s architecture, middleware, and developer tools are better equipped to handle the complexity often encountered in large applications.

Can Context API and Redux coexist in the same application?

Yes, you can use both Context API and Redux in a single application. Context API handles simpler local state inside specific components, while Redux takes care of global state and complex state structures.

What are some typical use cases for Context API?

Context API works well for global application state: user authentication, theme management, and localization. It also removes the need for prop drilling in deeply nested component structures.

Has Redux become obsolete now that Context API exists?

Redux has not become obsolete. It is still a valuable tool, particularly for large applications with complicated state management requirements. Context API is lighter and friendlier to beginners, but it is an alternative rather than a replacement.

Can functions and methods be shared via Context API?

Yes. Context API lets you share functions and methods, so you can pass behavior across components as well as data.

Conclusion

The React Context API is a solid addition to React’s state management options. It simplifies sharing data between components, removes prop drilling, and manages global application state efficiently. It won’t replace Redux in every case, but it’s a more accessible and lighter alternative, especially for smaller projects and simpler state management needs.

Knowing the strengths and limitations of each tool matters. Weigh your project’s requirements and pick accordingly, whether that’s Context API, Redux, or a combination of both.

References

• React Context API - Official Documentation
• Redux - Official Documentation
• When to Use React Context vs. Redux - LogRocket Blog
• A Guide to React Context API - freeCodeCamp
• Managing State in React with Context API and Hooks - Tania Rascia
• Next.js Documentation - State Management (Note: Next.js docs might not directly cover Context API in depth for global state, but it’s relevant for Next.js projects)
• TypeScript with React Context API - Robin Wieruch
• Understanding useContext Hook in React - DigitalOcean
• React Context API vs Redux: Which One Should You Choose? - Simform
• State Management with React Context and Hooks - Kent C. Dodds
• Avoiding Prop Drilling in React with Context API - Medium
• Performance Considerations for React Context API - (Example: Search for articles on this topic from reputable sources like LogRocket, Smashing Magazine, or dev.to)