Topic

Passing data deeply with context

Definition

React Context lets a provider make a value available to descendant components without manually passing it through every intermediate prop.

In simpler words

Context is a shared channel for a subtree, useful when many levels need the same value.

createContext, providers, consumers, and focused context values.

Open official example (opens in new tab)

After this you can

Avoid repetitive prop threading for stable cross-cutting data.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand Passing data deeply with context

createContext, providers, consumers, and focused context values.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

Passing data deeply with context in code

const ThemeContext = createContext("light");
<ThemeContext.Provider value="dark"><Page /></ThemeContext.Provider>;

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply Passing data deeply with context

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Hot value in wide context

// Wrong
<AppContext.Provider value={{ tickets, draft, theme, user }}>

// Right
// Split contexts; keep frequently changing values narrow

Wide, hot providers re-render large trees.

Mistake: Nest lists in context instead of Query

// Wrong
const TicketsContext = createContext([])

// Right
useQuery({ queryKey: ["tickets"], queryFn: list })

Server cache belongs in Query.

Mistake: Missing Provider

// Wrong
const v = useContext(ThemeContext); // undefined in prod route

// Right
<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>

Wrap the subtree that consumes the context.

Live playground

Passing data deeply with context sandbox

Change one input at a time and predict the next render.

Theme context

Deep child reads theme = light (no prop drilling)

Keep in mind

Keep the formal definition in mind; it explains which tool belongs where.
Prefer one source of truth over synchronized copies of the same value.
When behavior surprises you, trace: input → update → render → committed UI.
Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. What is React context for?

Concept

Passing a value deeply without prop drillingCaching server responses so components skip refetchingSharing state between two separate React rootsReplacing every prop with a global value

2. createContext + Provider pattern?

Syntax

Wrap the tree with the context object directly; children read its .valuePass the context to each child as a prop; they call context.get()Register the Provider on window; consumers read window.contextWrap tree with Provider value={...}; consumers read via useContext

3. When context updates, who re-renders?

Practical

Only the Provider component itselfEvery component in the app, consumer or notConsumers of that context (and their descendants as usual)Only the direct children of the Provider

4. Default context value use?

Logic

Fallback when no Provider above — often null/meaningful defaultThe value used whenever the Provider re-rendersThe initial value that the first Provider must matchA default that overrides any Provider value below it

5. Context for theme?

Concept

Common — theme value provided near rootDiscouraged — theme should be prop-drilled insteadOnly valid if the theme is a single stringUnnecessary because CSS variables replace context

6. Why not put everything in one giant context?

Practical

A giant context object cannot be typed in TypeScriptReact limits each Provider to a single primitive valueAny value change re-renders all consumers — split contextsLarge context values are never garbage collected

7. Reading context in a child?

Syntax

const theme = useContext(ThemeContext)const theme = ThemeContextconst theme = ThemeContext.Consumerconst theme = ThemeContext.value

8. Must every prop become context?

Logic

Yes — context is always cheaper than propsYes, for any prop passed more than one levelYes, unless the prop happens to be a functionNo — pass props for local relationships

9. Updating context value?

Concept

Parent holds state and passes new value to ProviderMutate the Provider’s value object directly to update itCall ThemeContext.set(next) from any consumerReassign the context default so consumers pick it up

10. Which misuse hurts?

Practical

Providing a theme value near the root via contextExposing the auth session through a single contextUsing context to avoid drilling locale eight levels deepUsing context to avoid thinking about state ownership for every tiny value

11. What does useContext return here?

Conceptintermediate

const ThemeContext = createContext('light');
function Button() {
  const theme = useContext(ThemeContext);
}

The nearest Provider’s value, or "light" if no Provider is aboveAlways "light" regardless of ProvidersThe Provider component itselfA setter function

12. Why can this re-render all consumers on every render?

Syntaxadvanced

<ThemeContext.Provider value={{ theme, toggle }}>
  {children}
</ThemeContext.Provider>

A new object literal is a new value identity every renderProviders never re-render consumersvalue must be a stringchildren block updates

13. What is the mistake in this read?

Practicalintermediate

const theme = ThemeContext;

You must call useContext(ThemeContext), not use the context object directlyNothing — that reads the valueIt should be ThemeContext.valueUse props instead of context

14. Why split state and dispatch into two contexts?

Logicadvanced

<StateContext.Provider value={state}>
  <DispatchContext.Provider value={dispatch}>

It is required by ReactTo store more dataDispatch cannot share a context with stateDispatch-only consumers won’t re-render when state changes

15. What does the null default enable here?

Conceptintermediate

const AuthContext = createContext(null);
function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('Wrap in AuthProvider');
  return ctx;
}

It disables the contextIt stores the userA guard that throws if the hook is used outside its ProviderIt forces re-renders

Checking your session…