Context best practices in React - Mini Project: Build & Apply

Context Best Practices in React

📖 Scenario: You are building a simple React app that shares a theme color across multiple components without passing props manually.

🎯 Goal: Create a React app that uses Context to provide a theme color to nested components following best practices.

📋 What You'll Learn

Create a context with React.createContext

Provide the context value using a Context.Provider

Consume the context value in a child component using useContext hook

Follow best practices for naming and structure

💡 Why This Matters

🌍 Real World

Sharing global data like themes, user info, or settings across many components without passing props manually.

💼 Career

Understanding React Context is essential for building scalable React apps and is a common requirement in frontend developer roles.

1

Create the Theme Context

Create a context called ThemeContext using React.createContext with the default value 'light'.

React

# Create ThemeContext with default value 'light'
# Your code here

Need a hint?

Use React.createContext('light') and assign it to ThemeContext.

2

Add Theme Provider Component

Create a functional component called ThemeProvider that returns ThemeContext.Provider with the value 'dark' and renders its children inside.

React

import React from 'react';

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

// Create ThemeProvider component that provides 'dark' theme
# Your code here

Need a hint?

Wrap {children} inside ThemeContext.Provider with value 'dark'.

3

Consume Theme Context in Child Component

Create a functional component called ThemedButton that uses the useContext hook to get the theme from ThemeContext and renders a button with text showing the current theme.

React

import React from 'react';

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

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

// Create ThemedButton component that uses useContext to get theme
# Your code here

Need a hint?

Use const theme = useContext(ThemeContext) inside ThemedButton and display it inside a button.

4

Use ThemeProvider and ThemedButton in App

Create a functional component called App that uses ThemeProvider to wrap ThemedButton and export App as default.

React

import React, { useContext } from 'react';

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

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

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return {`Current theme is ${theme}`};
}

// Create App component that uses ThemeProvider to wrap ThemedButton
# Your code here

Need a hint?

Wrap ThemedButton inside ThemeProvider in App and export App as default.