Context separation

Learn to protect performance by splitting multiple contexts.

Context split

A big context re-renders all consumers on every small change. This creates performance issues. The fix: split the context into several smaller contexts.

For example, in a user context, user and setUser are kept in separate contexts. user changes often, setUser never. Components using only setUser avoid needless renders.

This pattern is called state and setter split. React's official docs recommend it too; it brings serious speed gains in large apps.

Two context example

Define a UserStateContext and a UserSetContext. The Provider wraps both; it gives user and setUser as separate values.

On the read side, components needing only setUser use useContext(UserSetContext); they don't render when user changes. Components needing only user read UserStateContext.

So each component listens only to the value it needs. React's render tree runs more efficiently. This approach matters in large lists and forms.

Exercise Define two contexts

Complete the skeleton. Create two contexts called UserStateContext and UserSetContext; both with null defaults. Export both.

Show example solution

import { createContext } from "react";

const UserStateContext = createContext(null);
const UserSetContext = createContext(null);

export { UserStateContext, UserSetContext };

Test yourself

Why split context?
- To write less code
- For performance
- To skip useEffect
- To change CSS
Show answer

For performance — Splitting context is for performance.

Split pattern

Frequently changing ____ and never-changing setter are kept in separate contexts.

Show answer

Frequently changing state and never-changing setter are kept in separate contexts.

Match the context split

UserStateContext

user
UserSetContext

setUser
Provider

Wraps
useContext

Reads

Next lesson: Context + useReducer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies