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

Need a 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

Need a 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

Need a 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

Need a hint?

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