You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
As your React applications grow, you need more sophisticated tools for state management and code reuse. This lesson covers useContext, useReducer, compound components, render props, higher-order components, and performance optimisation with React.memo, useMemo, and useCallback.
Prop drilling is passing props through many intermediate components that don't use them:
App → Layout → Sidebar → UserMenu → Avatar
(passes user through every level)
useContext lets you share data across the tree without passing props manually.
import { createContext, useContext, useState, ReactNode } from "react";
// 1. Create the context
interface ThemeContextType {
theme: "light" | "dark";
toggle: () => void;
}
const ThemeContext = createContext<ThemeContextType | null>(null);
// 2. Create a provider component
function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<"light" | "dark">("light");
const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));
return (
<ThemeContext.Provider value={{ theme, toggle }}>
{children}
</ThemeContext.Provider>
);
}
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.