Lecture on Context API and Theme Switcher in React

Introduction

• Informal teaching style.
• Target for the video: 1000 comments.
• Topic: Context API and its relevance to React.
• Challenges because of the complexity of the topic.

Fundamentals of Context API

1. Starting Point: Props

   • Understanding Props and Prop drilling issues.
   • Context API is introduced after understanding Prop issues.
   • Further evolves into Redux, Redux Toolkit, Zustand.

2. Context API Essentials

   • Global state management without Prop drilling.
   • Typical structure involves creating Context, Provider, and using useContext.
   • Context API can solve prop drilling by creating a central store that provides data to the entire React component tree.
   • Context setup includes createContext, Provider, and value passing.
   • Example use-case involves passing a global user state (username etc.) across components like Dashboard, Card, etc.

Practical Implementation: Context API

1. Steps to Implement Context API

   • Create a context using createContext.
   • Create a Provider to wrap components and provide data access.
   • Use the useContext hook to access context data within components.

2. Example Code Analysis

   • Created UserContext and UserContextProvider to manage user state globally.

     import { createContext, useState } from 'react';
     
     const UserContext = createContext();
     
     const UserContextProvider = ({ children }) => {
       const [user, setUser] = useState(null);
       return (
         <UserContext.Provider value={{ user, setUser }}>
           {children}
         </UserContext.Provider>
       );
     };
     
     export { UserContext, UserContextProvider };
     

3. Component Structure

   • App.jsx wrapped with UserContextProvider.
   • Separate components for Login and Profile which consume context data.
   • Example Login Component to set user:

     import { useContext, useState } from 'react';
     import { UserContext } from './UserContext';
     
     const Login = () => {
       const [username, setUsername] = useState('');
       const { setUser } = useContext(UserContext);
     
       const handleSubmit = (event) => {
         event.preventDefault();
         setUser({ username });
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
           <button type="submit">Login</button>
         </form>
       );
     };
     
     export default Login;
     

4. Profile Component

   • Consume the user state:

     import { useContext } from 'react';
     import { UserContext } from './UserContext';
     
     const Profile = () => {
       const { user } = useContext(UserContext);
       return user ? <div>Welcome, {user.username}</div> : <div>Please login</div>;
     };
     
     export default Profile;
     

Advanced Use-Case: Theme Switcher

1. Theme Context Setup

   • Similar to User Context but includes light and dark mode management.

     import { createContext, useState, useContext } from 'react';
     
     const ThemeContext = createContext();
     
     const ThemeProvider = ({ children }) => {
       const [themeMode, setThemeMode] = useState('light');
     
       const toggleTheme = () => {
         setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
       };
     
       return (
         <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
           {children}
         </ThemeContext.Provider>
       );
     };
     
     export { ThemeContext, ThemeProvider };
     

2. Theme Application

   • Apply theme mode using useEffect to toggle classes on the HTML element.
   • Tailwind CSS usage for conditional class application based on the theme.

3. Theme Button Component

   • Button to toggle between themes using ThemeContext:

     import { useContext } from 'react';
     import { ThemeContext } from './ThemeContext';
     
     const ThemeButton = () => {
       const { themeMode, toggleTheme } = useContext(ThemeContext);
     
       return (
         <button onClick={toggleTheme}>
           Switch to {themeMode === 'light' ? 'dark' : 'light'} mode
         </button>
       );
     };
     
     export default ThemeButton;
     

4. Tailwind Configuration Adjustment

   • Remember to add and configure Tailwind for dark mode.

     darkMode: 'class',
     

5. Complete Project Structure

   • Use ThemeProvider and components properly.

Conclusion

• Context API simplifies state management in React applications.
• Helps prevent prop drilling and maintains clean code structure.
• Works well with libraries like Tailwind CSS for theme management.
• Practicing the implementation consolidates understanding.