Why context is needed in React

Introduction

Context helps share data easily between parts of a React app without passing props step-by-step.

You want to share user login info across many components.

You need a theme (like dark or light mode) available everywhere.

You want to avoid passing the same data through many layers of components.

You have settings or language preferences used in many places.

You want to keep your code clean and simple by reducing prop drilling.

Syntax

React

const MyContext = React.createContext(defaultValue);

function MyProvider({ children }) {
  const value = ...; // some shared data
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

function MyComponent() {
  const contextValue = React.useContext(MyContext);
  return <div>{contextValue}</div>;
}

React.createContext creates a context object.

Provider wraps components to share data.

Examples

This example shares a theme value "dark" to a button deep inside components without passing props.

React

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

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

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = React.useContext(ThemeContext);
  return <button>{`Theme is ${theme}`}</button>;
}

This example shares user info so any component can greet the user without prop drilling.

React

const UserContext = React.createContext(null);

function UserProvider({ children }) {
  const user = { name: 'Anna' };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

function Greeting() {
  const user = React.useContext(UserContext);
  return <h1>{`Hello, ${user.name}!`}</h1>;
}

Sample Program

This React app uses context to share the current language and a way to change it. The LanguageSwitcher component can read and update the language without props.

React

import React from 'react';

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

function LanguageProvider({ children }) {
  const [language, setLanguage] = React.useState('English');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

function LanguageSwitcher() {
  const { language, setLanguage } = React.useContext(LanguageContext);

  return (
    <div>
      <p>Current language: {language}</p>
      <button onClick={() => setLanguage('Spanish')}>Switch to Spanish</button>
      <button onClick={() => setLanguage('English')}>Switch to English</button>
    </div>
  );
}

function App() {
  return (
    <LanguageProvider>
      <LanguageSwitcher />
    </LanguageProvider>
  );
}

export default App;

Important Notes

Context is great for global data but avoid overusing it for everything.

Updating context causes all components using it to re-render.

Use context to keep your app organized and avoid passing props through many layers.

Summary

Context shares data easily across many components.

It helps avoid passing props through many layers (prop drilling).

Use context for global info like themes, user data, or settings.

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