useContext & useRef

What this module covers

4 steps · React

1. Step 1. useContext & useRef

   Context solves prop drilling — passing data through many components that don't need it. const ThemeCtx = createContext('dark'); // 1. create <ThemeCtx.Provider value={{ theme, setTheme }}> // 2. provide at root <App /> </ThemeCtx.Provider> const { theme } = useContext(ThemeCtx); // 3. consume anywhere useRef holds a mutable value that doesn't trigger re-renders when changed: const inputRef = useRef(null); <input ref={inputRef} /> <button onClick={() => inputRef.current.focus()}>Focus</button> const renderCount = useRef(0); useEffect(() => { renderCount.current += 1; }); // persists across renders, no re-render triggered

   ThemedText never needs a theme prop passed down through every intermediate component — that's precisely the prop-drilling problem Context exists to solve. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does ThemedText read the theme via useContext?

2. Step 2. Quiz: useContext & useRef

   Answer these questions about Context and refs.

   Context solves prop drilling; a ref's .current can change without causing a re-render, unlike state. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Theme Context Toggle

   Create a ThemeContext with a Provider that holds the current theme ("light" or "dark") and a toggle function. Any component can read and toggle it via useContext.

   This is the full create → provide → consume cycle from the concepts step, wired end-to-end: the state lives once, in the Provider, and any descendant can read and change it without props. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does ThemeProvider supply a value via .Provider, and does ThemeButton read it with useContext?

4. Step 4. Mini project: useContext & useRef

   Create a ThemeContext with a Provider that holds the current theme ("light" or "dark") and a toggle function. Any component can read and toggle it via useContext. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This is the full create → provide → consume cycle from the concepts step, wired end-to-end: the state lives once, in the Provider, and any descendant can read and change it without props. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does ThemeProvider supply a value via .Provider, and does ThemeButton read it with useContext?