Consuming context in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React Context used for?

React Context lets you share data across components without passing props manually at every level. It's like having a global store for certain values.

beginner

How do you consume context in a functional React component?

Use the useContext hook with the context object to get the current context value inside your component.

intermediate

What happens if a component consuming context is rendered outside the matching Provider?

The component receives the default value defined when creating the context, because no Provider above it supplies a value.

intermediate

Can you consume multiple contexts in one component? How?

Yes, by calling useContext multiple times with different context objects inside the same component.

beginner

Why is consuming context better than prop drilling?

Consuming context avoids passing props through many layers of components that don't need them, making code cleaner and easier to maintain.

Which React hook is used to consume context in a functional component?

A useEffect

B useState

C useReducer

D useContext

The useContext hook is designed specifically to access context values inside functional components.

What value does a component get if it consumes context but no Provider is above it?

A The default value set when creating the context

B Undefined

C Null

D An error is thrown

If no Provider is found, React uses the default value given when the context was created.

How can you consume two different contexts in one component?

A Wrap the component in two Providers

B Use useContext once with an array of contexts

C Call useContext twice with each context

D Use useState to combine contexts

You call useContext separately for each context you want to consume.

What is a main benefit of consuming context over passing props?

A It avoids prop drilling through many components

B It replaces Redux

C It automatically updates the URL

D It improves performance by skipping rendering

Context helps avoid passing props through components that don't need them, simplifying code.

Which of these is NOT a correct way to consume context?

A Using Context.Consumer component

B Accessing context value via props

C Using useContext hook

D Calling useContext with the context object

Context values are not passed via props automatically; you must use useContext or Context.Consumer.

Explain how to consume context in a React functional component and why it is useful.

Think about how you get shared data without passing props step-by-step.

Describe what happens if a component tries to consume context but no Provider is wrapping it.

Consider the default value set when creating context.

Practice

1. What is the primary purpose of using useContext in React?

easy

A. To fetch data from an API

B. To create a new context object

C. To update the state of a component

D. To read shared data from a context inside a component

Solution

1. Step 1: Understand the role of useContext

   useContext is a React hook used to access data from a context object inside a component.

2. Step 2: Differentiate from other hooks

   It does not create context or update state; it only reads the shared data provided by a context.

3. Final Answer:

   To read shared data from a context inside a component -> Option D

4. Quick Check:

   useContext reads context data [OK]

Hint: useContext reads shared data inside components [OK]

Common Mistakes:

• Confusing useContext with creating context
• Thinking useContext updates state
• Using useContext to fetch API data

2. Which of the following is the correct syntax to consume a context named ThemeContext inside a functional component?

easy

A. const theme = useContext(ThemeContext);

B. const theme = ThemeContext.useContext();

C. const theme = useContext();

D. const theme = ThemeContext();

Solution

1. Step 1: Recall the correct useContext syntax

   The hook useContext is called with the context object as an argument: useContext(ThemeContext).

2. Step 2: Identify incorrect options

   Options A, B, and D misuse the hook or context object syntax.

3. Final Answer:

   const theme = useContext(ThemeContext); -> Option A

4. Quick Check:

   useContext requires context object as argument [OK]

Hint: Pass context object inside useContext() [OK]

Common Mistakes:

• Calling useContext without argument
• Using context object as a function
• Trying to call useContext as a method on context

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

const UserContext = React.createContext('Guest');

function DisplayUser() {
  const user = React.useContext(UserContext);
  console.log(user);
  return <div>Hello, {user}!</div>;
}

function App() {
  return (
    <UserContext.Provider value="Alice">
      <DisplayUser />
    </UserContext.Provider>
  );
}

medium

A. "Guest"

B. "Alice"

C. undefined

D. Error: Context not found

Solution

1. Step 1: Identify the context default and provider value

   The default value is "Guest" but the Provider sets the value to "Alice".

2. Step 2: Understand useContext behavior inside Provider

   Since DisplayUser is inside the Provider, it receives the value "Alice" from context.

3. Final Answer:

   "Alice" -> Option B

4. Quick Check:

   Provider value overrides default context [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default context value is always used
• Thinking useContext returns undefined without explicit value
• Confusing Provider and Consumer roles

4. What is the error in the following code that tries to consume a context?

const LanguageContext = React.createContext('English');

function Greeting() {
  const language = useContext(LanguageContext);
  return <h1>Hello in {language}</h1>;
}

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

medium

A. LanguageContext must be a function, not an object

B. Greeting component must be a class component

C. useContext is not imported or defined

D. Context value must be passed as a prop

Solution

1. Step 1: Check useContext usage

   The code uses useContext but does not import or prefix it with React.

2. Step 2: Identify missing import or reference

   Without importing useContext from React or using React.useContext, this causes a ReferenceError.

3. Final Answer:

   useContext is not imported or defined -> Option C

4. Quick Check:

   useContext must be imported or accessed via React [OK]

Hint: Always import or prefix useContext with React [OK]

Common Mistakes:

• Forgetting to import useContext
• Using useContext without React prefix or import
• Assuming context value passed as prop automatically

5. You have a nested component structure where ThemeContext provides a value at the top level. You want to consume this context in a deeply nested component without passing props through intermediate components. Which approach correctly achieves this?

hard

A. Wrap the nested component tree with ThemeContext.Provider and use useContext(ThemeContext) inside the nested component

B. Pass the context value as props through every intermediate component until it reaches the nested component

C. Use useContext in the nested component without wrapping the tree in ThemeContext.Provider

D. Create a new context inside the nested component and use useContext on it

Solution

1. Step 1: Understand context provider role

   The ThemeContext.Provider must wrap the component tree to supply the context value.

2. Step 2: Consume context in nested component

   Inside the nested component, useContext(ThemeContext) reads the value without needing props passed down.

3. Final Answer:

   Wrap the nested component tree with ThemeContext.Provider and use useContext(ThemeContext) inside the nested component -> Option A

4. Quick Check:

   Provider wraps tree; useContext reads value [OK]

Hint: Wrap tree with Provider, consume with useContext inside [OK]

Common Mistakes:

• Trying to use useContext without Provider
• Passing props through all components instead of context
• Creating new context inside nested component