Why context is needed in React - See It in Action

Why context is needed

📖 Scenario: You are building a simple React app where multiple components need to share the same user information, like a username. Instead of passing this data through many layers of components, you will use React Context to share it easily.

🎯 Goal: Build a React app that uses Context to share a username between components without passing props manually through every level.

📋 What You'll Learn

Create a React Context called UserContext with a default value

Create a component UserProvider that uses UserContext.Provider to provide a username

Create a child component DisplayUser that consumes the username from UserContext

Use the UserProvider to wrap DisplayUser so it can access the username

💡 Why This Matters

🌍 Real World

Many apps need to share user info or settings across many parts of the app without passing props everywhere. React Context makes this easy and clean.

💼 Career

Understanding React Context is important for building scalable React apps and working on teams that maintain large component trees.

1

Create UserContext with default value

Create a React Context called UserContext with the default value { username: 'Guest' }.

React

import React from 'react';

// Create UserContext with default value
// Your code here

Hint

Use React.createContext and pass an object with username: 'Guest' as default.

2

Create UserProvider component

Create a functional component called UserProvider that returns UserContext.Provider with the value { username: 'Alice' } and renders its children inside.

React

import React from 'react';

const UserContext = React.createContext({ username: 'Guest' });

// Create UserProvider component
// Your code here

Hint

Wrap {children} inside UserContext.Provider with the value { username: 'Alice' }.

3

Create DisplayUser component consuming context

Create a functional component called DisplayUser that uses React.useContext(UserContext) to get the username and returns a <div> showing the text User: {username}.

React

import React from 'react';

const UserContext = React.createContext({ username: 'Guest' });

function UserProvider({ children }) {
  return {children};
}

// Create DisplayUser component
// Your code here

Hint

Use React.useContext(UserContext) to get the username and display it inside a <div>.

4

Use UserProvider to wrap DisplayUser

Create a functional component called App that returns UserProvider wrapping DisplayUser.

React

import React from 'react';

const UserContext = React.createContext({ username: 'Guest' });

function UserProvider({ children }) {
  return {children};
}

function DisplayUser() {
  const { username } = React.useContext(UserContext);
  return User: {username};
}

// Create App component
// Your code here

Hint

Wrap <DisplayUser /> inside <UserProvider> in the App component.

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