Context provides values to descendants of a provider. Consumer updates follow the provider value, so provider scope and value identity affect performance.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: Separate frequently changing editor state from stable theme configuration. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Map consumers to values
List which components read theme, editor text and session details. Their update frequencies are different.
Step 2: Split ownership boundaries
Give unrelated data separate providers where useful. A frequently replaced combined object makes all its consumers observe new context values.
Step 3: Measure rendering costs
Profile an editor keystroke. Stabilize a provider value when its dependencies are unchanged, rather than memoizing every component blindly.
Worked scenario
Separate frequently changing editor state from stable theme configuration.
Consider ThemeProvider above the application and EditorProvider around the editor. Typing changes editor state but does not replace the theme value. A toolbar that needs both can consume both contexts; a theme-only navigation bar need not subscribe to editor text. Provider placement expresses who shares data and how long that data lives.
Common mistake
Wrapping every value in one object can update consumers unrelated to the changed field.
Verify the behavior
Type in the editor while profiling theme-only consumers. Also verify that splitting providers did not accidentally create independent copies of state meant to be shared.
Interview exercise
Reduce unnecessary context updates.
Answer and reasoning
Split contexts by usage and measure consumer rendering; memoize provider values when it preserves meaningful reference stability.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.