Context best practices in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React Context used for?

React Context is used to share data across components without passing props manually at every level. It helps avoid 'prop drilling' by providing a way to pass data through the component tree.

intermediate

Why should you avoid putting large or frequently changing data in Context?

Putting large or frequently changing data in Context can cause unnecessary re-renders of all components consuming that context, which can hurt performance. It's better to keep Context for stable, global data.

intermediate

How can you optimize Context usage to prevent unnecessary re-renders?

You can optimize by splitting Context into smaller, focused contexts, memoizing context values with useMemo, and avoiding passing new object or function references unless needed.

beginner

What is a good practice when naming Context providers and consumers?

Use clear and descriptive names for Context and its Provider, like ThemeContext and ThemeProvider. This makes code easier to read and understand.

beginner

When should you consider using Context over props?

Use Context when you need to share data that many components need, especially deeply nested ones, and when passing props through many layers becomes cumbersome.

What problem does React Context primarily solve?

A Improving CSS styling

B Avoiding prop drilling

C Handling HTTP requests

D Managing component lifecycle

React Context helps avoid prop drilling by allowing data to be shared without passing props through every component.

Which of these is a best practice when using React Context?

A Put all app state in one big Context

B Use Context only for styling

C Never memoize context values

D Split Context into smaller focused parts

Splitting Context into smaller parts helps optimize performance and keeps code organized.

What can cause unnecessary re-renders when using Context?

A Passing new object references every render

B Memoizing context values

C Passing stable primitive values

D Using useContext hook

Passing new object or function references causes consumers to re-render even if data is unchanged.

When is it better to use props instead of Context?

A When data is only needed by a few components nearby

B When data is global

C When data changes frequently

D When data is needed by many nested components

Props are simpler and better when data is only needed by nearby components.

What naming convention is recommended for Context providers?

A Use generic names like Provider

B Use lowercase names

C Use descriptive names like ThemeProvider

D Use numbers in names

Descriptive names improve code readability and understanding.

Explain why and how you would split React Context into smaller parts.

Think about performance and clarity.

Describe the difference between using props and Context for passing data in React.

Consider component depth and data scope.

Practice

1. What is the main purpose of React Context?

easy

A. To handle routing between pages

B. To style components globally

C. To manage component local state only

D. To share data between components without passing props manually

Solution

1. Step 1: Understand React Context role

   React Context allows sharing data across many components without passing props at every level.

2. Step 2: Compare with other options

   Styling, local state, and routing are handled by other React features or libraries, not Context.

3. Final Answer:

   To share data between components without passing props manually -> Option D

4. Quick Check:

   Context shares data without prop drilling [OK]

Hint: Context shares data without passing props repeatedly [OK]

Common Mistakes:

• Confusing Context with styling or routing
• Thinking Context manages only local state
• Assuming Context replaces all state management

2. Which of the following is the correct way to create a Context in React?

easy

A. const MyContext = new Context();

B. const MyContext = createContext();

C. const MyContext = React.createContext();

D. const MyContext = React.useContext();

Solution

1. Step 1: Recall Context creation syntax

   React Context is created using React.createContext() function.

2. Step 2: Check other options

   A uses invalid constructor, B misses React prefix, D calls a hook instead of creating context.

3. Final Answer:

   const MyContext = React.createContext(); -> Option C

4. Quick Check:

   Use React.createContext() to create context [OK]

Hint: Create context with React.createContext() [OK]

Common Mistakes:

• Omitting React prefix
• Using new keyword incorrectly
• Confusing useContext hook with createContext

3. Given this code snippet, what will be logged to the console?

const ThemeContext = React.createContext('light');

function DisplayTheme() {
  const theme = React.useContext(ThemeContext);
  console.log(theme);
  return <div>Current theme: {theme}</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <DisplayTheme />
    </ThemeContext.Provider>
  );
}

medium

A. "dark"

B. "light"

C. undefined

D. Error: useContext called outside Provider

Solution

1. Step 1: Identify Provider value

   The ThemeContext.Provider wraps DisplayTheme with value "dark".

2. Step 2: Understand useContext behavior

   useContext reads the nearest Provider value, so theme is "dark" inside DisplayTheme.

3. Final Answer:

   "dark" -> Option A

4. Quick Check:

   useContext reads Provider value, not default [OK]

Hint: useContext reads nearest Provider value, not default [OK]

Common Mistakes:

• Assuming default value is used despite Provider
• Thinking useContext returns undefined without explicit value
• Confusing useContext with useState

4. What is wrong with this React Context usage?

const UserContext = React.createContext();

function Profile() {
  const user = React.useContext(UserContext);
  return <div>User: {user.name}</div>;
}

function App() {
  return <Profile />;
}

medium

A. UserContext.Provider is missing, so user is undefined causing error

B. useContext hook is used incorrectly inside Profile

C. React.createContext() requires a default value

D. Profile component should not access context directly

Solution

1. Step 1: Check for Provider wrapping

   App renders Profile without wrapping it in UserContext.Provider, so context value is undefined.

2. Step 2: Understand consequence in Profile

   Accessing user.name when user is undefined causes runtime error.

3. Final Answer:

   UserContext.Provider is missing, so user is undefined causing error -> Option A

4. Quick Check:

   Missing Provider means context value is undefined [OK]

Hint: Always wrap consumers with Provider to avoid undefined context [OK]

Common Mistakes:

• Thinking createContext must have default value
• Believing useContext usage is incorrect here
• Assuming components can't access context directly

5. You want to update a theme value shared via Context from a nested component. Which is the best practice to enable this?

hard

A. Use useState inside the nested component to update theme locally

B. Pass a setter function in the Context value and call it inside the nested component

C. Create a new Context inside the nested component to override theme

D. Modify the Context object directly without Provider

Solution

1. Step 1: Understand Context update pattern

   To update shared data, pass a setter function (like from useState) in Context value.

2. Step 2: Evaluate other options

   Using local useState won't update shared theme; creating new Context breaks sharing; modifying Context object directly is invalid.

3. Final Answer:

   Pass a setter function in the Context value and call it inside the nested component -> Option B

4. Quick Check:

   Pass setter in Context to update shared state [OK]

Hint: Pass setter function via Context to update shared state [OK]

Common Mistakes:

• Trying to update Context value directly
• Using local state instead of shared state
• Creating multiple Contexts unnecessarily