Why context is needed in React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React context using the correct function.

React

const MyContext = [1]();

Drag options to blanks, or click blank then click option'

AuseState

BcreateContext

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Using useEffect or useContext to create context

The createContext function is used to create a new React context object.

2fill in blank

medium

Complete the code to provide a value to the context provider.

React

<MyContext.Provider value=[1]>{children}</MyContext.Provider>

Drag options to blanks, or click blank then click option'

Anull

Bfalse

Cundefined

DsharedValue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or undefined as value

Forgetting to pass a value prop

The value prop of the provider passes the shared data to consuming components.

3fill in blank

hard

Fix the error in consuming context by completing the hook call.

React

const value = [1](MyContext);

Drag options to blanks, or click blank then click option'

AuseState

BcreateContext

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext instead of useContext

Using useState or useEffect to consume context

The useContext hook is used to read the current context value.

4fill in blank

hard

Fill both blanks to create and use a context provider with a default value.

React

const ThemeContext = [1]('light');

return <ThemeContext.Provider value=[2]>{children}</ThemeContext.Provider>;

Drag options to blanks, or click blank then click option'

AcreateContext

BuseState

C'dark'

D'light'

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Passing the default value as the provider value

We create a context with default 'light' and provide 'dark' as the current value.

5fill in blank

hard

Fill all three blanks to consume context and display its value inside a component.

React

const [2] = [1](MyContext);

return <div>The theme is [2].[3].</div>;

Drag options to blanks, or click blank then click option'

AuseContext

Bvalue

Ctheme

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext to consume context

Trying to display the hook call directly without accessing properties

We use useContext to get the context value, then access its theme property to display.

Practice

1. Why do React developers use Context instead of passing props through many components?

easy

A. To replace state management completely

B. To avoid prop drilling and share data easily across components

C. To make components load faster

D. To write less CSS code

Solution

1. Step 1: Understand prop drilling problem

   Passing props through many layers is tedious and error-prone, called prop drilling.

2. Step 2: Role of Context in React

   Context allows sharing data directly without passing props at every level.

3. Final Answer:

   To avoid prop drilling and share data easily across components -> Option B

4. Quick Check:

   Context avoids prop drilling = C [OK]

Hint: Context avoids passing props through many layers [OK]

Common Mistakes:

• Thinking Context makes components faster
• Believing Context replaces all state
• Confusing Context with styling

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

easy

A. const MyContext = React.Context.create();

B. const MyContext = React.useContext();

C. const MyContext = new Context();

D. const MyContext = React.createContext();

Solution

1. Step 1: Identify the correct React API for context creation

   React provides React.createContext() to create a context object.

2. Step 2: Check other options for syntax errors

   React.useContext() is a hook to consume context, not create it. Others are invalid syntax.

3. Final Answer:

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

4. Quick Check:

   Create context with React.createContext() = A [OK]

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

Common Mistakes:

• Using useContext to create context
• Trying to instantiate Context with new
• Incorrect method names like Context.create

3. Given this React code snippet, what will be the output shown by DisplayUser component?

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

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

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

medium

A. Hello, undefined!

B. Hello, Guest!

C. Hello, Alice!

D. Error: Context not found

Solution

1. Step 1: Understand default and provided context values

   The default value is 'Guest', but the provider sets value to 'Alice'.

2. Step 2: Context consumption in DisplayUser

   DisplayUser uses useContext to get the current context value, which is 'Alice' from the provider.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Provider value overrides default = A [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default value always shows
• Expecting undefined without provider
• Thinking useContext throws error if no provider

4. What is wrong with this React code using Context?

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

function Button() {
  const theme = React.useContext();
  return <button className={theme}>Click me</button>;
}

medium

A. useContext is called without context argument

B. Context must be created inside the component

C. Default value 'light' is invalid

D. Button component must be a class component

Solution

1. Step 1: Check useContext usage

   useContext requires the context object as an argument, e.g., useContext(ThemeContext).

2. Step 2: Verify other statements

   Context creation outside component is correct. Default value 'light' is valid. Functional components can use hooks.

3. Final Answer:

   useContext is called without context argument -> Option A

4. Quick Check:

   useContext needs context argument = B [OK]

Hint: Always pass context object to useContext() [OK]

Common Mistakes:

• Calling useContext() with no arguments
• Creating context inside component repeatedly
• Thinking default value must be an object
• Believing hooks require class components

5. You want to share a user's login status and theme preference across many nested components without passing props at every level. Which approach best solves this problem?

hard

A. Use React Context to provide user and theme data globally

B. Pass user and theme as props through every component manually

C. Store user and theme in local component state only

D. Use CSS variables to store user and theme data

Solution

1. Step 1: Identify the problem with prop drilling

   Passing props manually through many nested components is tedious and error-prone.

2. Step 2: Use Context for global data sharing

   React Context allows sharing data like user login and theme globally without prop drilling.

3. Step 3: Evaluate other options

   Local state is limited to one component. CSS variables cannot store user login info. Passing props manually is inefficient.

4. Final Answer:

   Use React Context to provide user and theme data globally -> Option A

5. Quick Check:

   Context shares global data easily = D [OK]

Hint: Use Context for global shared data like user and theme [OK]

Common Mistakes:

• Passing props through every component manually
• Trying to store user info in CSS
• Using local state for global data