React · Context (Implementation)

Creating Context

Master how to create React Context with practical examples, best practices, and real-world patterns.

Find videos you like?

Save to resource drawer for future reference!

The Basics of Creating Context

Understanding createContext() and its options

Creating Context is like setting up a radio station - you're establishing a broadcast channel that will carry specific type of data throughout your application.

Basic Syntax

// Create a Context with default value

const MyContext = React.createContext(defaultValue);

// Create a Context without default value

const MyContext = React.createContext();

defaultValue:Value used when no Provider wraps the component

Returns:Context object with Provider and Consumer

With Default Value

• Provides fallback value
• Useful for optional Context
• Prevents undefined errors
• Good for testing

Without Default Value

• Requires Provider usage
• Forces explicit setup
• Better error detection
• Common in production

Pro Tip

Always create Context with meaningful default values, even if you plan to always use a Provider. This helps with testing and development.

Step-by-Step Creation Guide

Learn how to create Context properly

Step 1: Create Context File

Create a dedicated file for your Context. This keeps your Context logic organized and reusable across your application.

//contexts/UserContext.js

import { createContext } from 'react';

// Define the shape of your context data

const UserContext = createContext({});

export default UserContext;

Best Practice

Create Context files in a dedicated `contexts/` folder for better organization.

Step 2: Define Context Shape

Define the structure and default values for your Context. This provides type safety and fallback values.

//Define default user state

const defaultUserState = {}

user: null,

isAuthenticated: false,

logout: () => {},

};

const UserContext = createContext(defaultUserState);

Type Safety

Define the complete shape including functions to ensure consistent API across your app.

Step 3: Create Custom Hook

Create a custom hook to consume your Context safely. This provides better error handling and developer experience.

//Custom hook for safe Context consumption

export function useUser() {}

const context = useContext(UserContext);

if (!context) {}

throw new Error('useUser must be used within a UserProvider');

}

return context;

}

Safety First

Custom hooks provide clear error messages and prevent undefined Context usage.

Step 4: Create Provider Component

Create a Provider component that manages the state and provides values to the Context consumers.

//Provider component with state management

export function UserProvider({ children }) {}

const [user, setUser] = useState(null);

const value = {}

user,

isAuthenticated: !!user,

logout: () => setUser(null),

};

return (

<UserContext.Provider value=<span className="text-green-600">{value}</span>>

{children}

</UserContext.Provider>

);

}

Encapsulation

The Provider encapsulates state logic and provides a clean API to consumers.

Practical Examples

Real-world Context creation patterns

Authentication Context Creation

Complete user authentication Context with login/logout functionality (no persistence in playground)

Frontend

// contexts/AuthContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';

// Define authentication context shape
const AuthContext = createContext({
  user: null,
  isAuthenticated: false,
  login: () => {},
  logout: () => {},
  loading: false,
});

// Custom hook for auth consumption
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Authentication provider component
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  // Login function
  const login = async (email, password) => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      const userData = {
        id: 1,
        name: 'John Doe',
        email: email,
        avatar: '👤'
      };
      
      setUser(userData);
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  // Logout function
  const logout = () => {
    setUser(null);
  };

  const value = {
    user,
    isAuthenticated: !!user,
    login,
    logout,
    loading,
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContext;

// Example App component using the AuthContext
function App() {
  const { user, isAuthenticated, login, logout, loading } = useAuth();
  
  if (loading) {
    return <div className="app"><h1>Loading...</h1></div>;
  }
  
  if (!isAuthenticated) {
    return <LoginForm onLogin={login} />;
  }
  
  return <Dashboard user={user} onLogout={logout} />;
}

// Login form component
function LoginForm({ onLogin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    await onLogin(email, password);
    setIsLoading(false);
  };
  
  return (
    <div className="app">
      <div className="login-form">
        <h1>🔐 Login</h1>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Email:</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="john@example.com"
              required
            />
          </div>
          <div className="form-group">
            <label>Password:</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              required
            />
          </div>
          <button type="submit" disabled={isLoading} className="login-btn">
            {isLoading ? 'Logging in...' : 'Login'}
          </button>
        </form>
        <p className="hint">Hint: Use any email and password</p>
      </div>
    </div>
  );
}

// Dashboard component
function Dashboard({ user, onLogout }) {
  return (
    <div className="app">
      <div className="dashboard">
        <div className="user-info">
          <div className="avatar">{user.avatar}</div>
          <div>
            <h2>Welcome, {user.name}!</h2>
            <p>{user.email}</p>
          </div>
        </div>
        <div className="actions">
          <button className="logout-btn" onClick={onLogout}>
            Logout
          </button>
        </div>
      </div>
    </div>
  );
}

// ReactDOM integration
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

Live Preview

Loading preview...

Best Practices for Creating Context

Follow these guidelines for better Context implementation

✅ Do This

Create Context files in dedicated folders
Provide meaningful default values
Create custom hooks for consumption
Export Provider and custom hook
Use TypeScript for type safety

❌ Avoid This

Don't create Context without default values
Don't useContext directly in components
Don't put complex objects in Context
Don't create Context for component-specific data
Don't forget error handling in custom hooks

File Structure Pattern

src/

├── contexts/

│ ├── ThemeContext.js

│ ├── AuthContext.js

│ └── NotificationContext.js

├── components/

│ ├── providers/

│ │ ├── ThemeProvider.js

│ │ └── AuthProvider.js

│ └── ui/

└── hooks/

├── useTheme.js

└── useAuth.js

Golden Rule

Always create Context with a clear purpose and well-defined API. Your future self will thank you for the organization.

Common Context Patterns

Proven patterns for different use cases

Authentication Context

const AuthContext = createContext({

user: null,

logout: () => {},

isLoading: false,

error: null,

});

Notification Context

const NotificationContext = createContext({

notifications: [],

addNotification: () => {},

removeNotification: () => {},

clearAll: () => {},

});

Settings Context

const SettingsContext = createContext({

settings: {},

updateSetting: () => {},

resetSettings: () => {},

saveSettings: () => {},

});

ReactDOM Integration

How to integrate Context with ReactDOM

After creating your Context and Provider, you need to integrate them with ReactDOM to render your application with the Context available throughout the component tree.

ReactDOM Setup

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

createRoot:Creates a React root for rendering

render:Renders your app component tree

Important Note

Make sure your App component is wrapped with the appropriate Context Providers to ensure Context is available throughout your application.

Key Takeaways

What you should remember about creating Context

🎯 Creation Essentials

• Use createContext() with meaningful defaults
• Create dedicated files for each Context
• Define the complete API shape
• Export Context and Provider separately

💡 Best Practices

• Create custom hooks for safe consumption
• Add proper error handling
• Use TypeScript when possible
• Keep Context values stable

Final Thought

Creating Context is about setting up clear communication channels. Well-designed Context makes your application more maintainable and your components more reusable.

Previous Topic

What is Context?

Understand when and why to use Context API, prop drilling problems, and context use cases.

Next Topic

Passing Data

Pass complex data through context, update context values, and context provider patterns.

Ask a Question

Have a question about Creating Context? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Context (Implementation)

Creating Context

Master how to create React Context with practical examples, best practices, and real-world patterns.

Find videos you like?

Save to resource drawer for future reference!

The Basics of Creating Context

Understanding createContext() and its options

Creating Context is like setting up a radio station - you're establishing a broadcast channel that will carry specific type of data throughout your application.

Basic Syntax

// Create a Context with default value

const MyContext = React.createContext(defaultValue);

// Create a Context without default value

const MyContext = React.createContext();

defaultValue:Value used when no Provider wraps the component

Returns:Context object with Provider and Consumer

With Default Value

• Provides fallback value
• Useful for optional Context
• Prevents undefined errors
• Good for testing

Without Default Value

• Requires Provider usage
• Forces explicit setup
• Better error detection
• Common in production

Pro Tip

Always create Context with meaningful default values, even if you plan to always use a Provider. This helps with testing and development.

Step-by-Step Creation Guide

Learn how to create Context properly

Step 1: Create Context File

Create a dedicated file for your Context. This keeps your Context logic organized and reusable across your application.

//contexts/UserContext.js

import { createContext } from 'react';

// Define the shape of your context data

const UserContext = createContext({});

export default UserContext;

Best Practice

Create Context files in a dedicated `contexts/` folder for better organization.

Step 2: Define Context Shape

Define the structure and default values for your Context. This provides type safety and fallback values.

//Define default user state

const defaultUserState = {}

user: null,

isAuthenticated: false,

logout: () => {},

};

const UserContext = createContext(defaultUserState);

Type Safety

Define the complete shape including functions to ensure consistent API across your app.

Step 3: Create Custom Hook

Create a custom hook to consume your Context safely. This provides better error handling and developer experience.

//Custom hook for safe Context consumption

export function useUser() {}

const context = useContext(UserContext);

if (!context) {}

throw new Error('useUser must be used within a UserProvider');

}

return context;

}

Safety First

Custom hooks provide clear error messages and prevent undefined Context usage.

Step 4: Create Provider Component

Create a Provider component that manages the state and provides values to the Context consumers.

//Provider component with state management

export function UserProvider({ children }) {}

const [user, setUser] = useState(null);

const value = {}

user,

isAuthenticated: !!user,

logout: () => setUser(null),

};

return (

<UserContext.Provider value=<span className="text-green-600">{value}</span>>

{children}

</UserContext.Provider>

);

}

Encapsulation

The Provider encapsulates state logic and provides a clean API to consumers.

Practical Examples

Real-world Context creation patterns

Authentication Context Creation

Complete user authentication Context with login/logout functionality (no persistence in playground)

Frontend

// contexts/AuthContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';

// Define authentication context shape
const AuthContext = createContext({
  user: null,
  isAuthenticated: false,
  login: () => {},
  logout: () => {},
  loading: false,
});

// Custom hook for auth consumption
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// Authentication provider component
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  // Login function
  const login = async (email, password) => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      const userData = {
        id: 1,
        name: 'John Doe',
        email: email,
        avatar: '👤'
      };
      
      setUser(userData);
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  // Logout function
  const logout = () => {
    setUser(null);
  };

  const value = {
    user,
    isAuthenticated: !!user,
    login,
    logout,
    loading,
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContext;

// Example App component using the AuthContext
function App() {
  const { user, isAuthenticated, login, logout, loading } = useAuth();
  
  if (loading) {
    return <div className="app"><h1>Loading...</h1></div>;
  }
  
  if (!isAuthenticated) {
    return <LoginForm onLogin={login} />;
  }
  
  return <Dashboard user={user} onLogout={logout} />;
}

// Login form component
function LoginForm({ onLogin }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    await onLogin(email, password);
    setIsLoading(false);
  };
  
  return (
    <div className="app">
      <div className="login-form">
        <h1>🔐 Login</h1>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Email:</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="john@example.com"
              required
            />
          </div>
          <div className="form-group">
            <label>Password:</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              required
            />
          </div>
          <button type="submit" disabled={isLoading} className="login-btn">
            {isLoading ? 'Logging in...' : 'Login'}
          </button>
        </form>
        <p className="hint">Hint: Use any email and password</p>
      </div>
    </div>
  );
}

// Dashboard component
function Dashboard({ user, onLogout }) {
  return (
    <div className="app">
      <div className="dashboard">
        <div className="user-info">
          <div className="avatar">{user.avatar}</div>
          <div>
            <h2>Welcome, {user.name}!</h2>
            <p>{user.email}</p>
          </div>
        </div>
        <div className="actions">
          <button className="logout-btn" onClick={onLogout}>
            Logout
          </button>
        </div>
      </div>
    </div>
  );
}

// ReactDOM integration
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

Live Preview

Loading preview...

Best Practices for Creating Context

Follow these guidelines for better Context implementation

✅ Do This

Create Context files in dedicated folders
Provide meaningful default values
Create custom hooks for consumption
Export Provider and custom hook
Use TypeScript for type safety

❌ Avoid This

Don't create Context without default values
Don't useContext directly in components
Don't put complex objects in Context
Don't create Context for component-specific data
Don't forget error handling in custom hooks

File Structure Pattern

src/

├── contexts/

│ ├── ThemeContext.js

│ ├── AuthContext.js

│ └── NotificationContext.js

├── components/

│ ├── providers/

│ │ ├── ThemeProvider.js

│ │ └── AuthProvider.js

│ └── ui/

└── hooks/

├── useTheme.js

└── useAuth.js

Golden Rule

Always create Context with a clear purpose and well-defined API. Your future self will thank you for the organization.

Common Context Patterns

Proven patterns for different use cases

Authentication Context

const AuthContext = createContext({

user: null,

logout: () => {},

isLoading: false,

error: null,

});

Notification Context

const NotificationContext = createContext({

notifications: [],

addNotification: () => {},

removeNotification: () => {},

clearAll: () => {},

});

Settings Context

const SettingsContext = createContext({

settings: {},

updateSetting: () => {},

resetSettings: () => {},

saveSettings: () => {},

});

ReactDOM Integration

How to integrate Context with ReactDOM

After creating your Context and Provider, you need to integrate them with ReactDOM to render your application with the Context available throughout the component tree.

ReactDOM Setup

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

createRoot:Creates a React root for rendering

render:Renders your app component tree

Important Note

Make sure your App component is wrapped with the appropriate Context Providers to ensure Context is available throughout your application.

Key Takeaways

What you should remember about creating Context

🎯 Creation Essentials

• Use createContext() with meaningful defaults
• Create dedicated files for each Context
• Define the complete API shape
• Export Context and Provider separately

💡 Best Practices

• Create custom hooks for safe consumption
• Add proper error handling
• Use TypeScript when possible
• Keep Context values stable

Final Thought

Creating Context is about setting up clear communication channels. Well-designed Context makes your application more maintainable and your components more reusable.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

What is Context?

Passing Data

Building Your Learning Module...

Creating Context

Basic Syntax

With Default Value

Without Default Value

Pro Tip

Step 1: Create Context File

Step 2: Define Context Shape

Step 3: Create Custom Hook

Step 4: Create Provider Component

Authentication Context Creation

✅ Do This

❌ Avoid This

File Structure Pattern

Golden Rule

Authentication Context

Notification Context

Settings Context

ReactDOM Setup

Important Note

🎯 Creation Essentials

💡 Best Practices

Final Thought

What is Context?

Passing Data

Creating Context

Basic Syntax

With Default Value

Without Default Value

Pro Tip

Step 1: Create Context File

Step 2: Define Context Shape

Step 3: Create Custom Hook

Step 4: Create Provider Component

Authentication Context Creation

✅ Do This

❌ Avoid This

File Structure Pattern

Golden Rule

Authentication Context

Notification Context

Settings Context

ReactDOM Setup

Important Note

🎯 Creation Essentials

💡 Best Practices

Final Thought