🗒 Cheat Sheet← Lesson
BitWithBite
React Worksheet

🌐 useContext

Chapter: State & Hooks — Core Patterns · Level ★★★ · Time: 20 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Set up a Context providerRead Context with useContextWrite a custom hook wrapperKnow when to use Context
📚 Quick Recap

🎯 What you'll practice: createContext, Provider, useContext, and the custom hook pattern.

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

1Context avoids the problem of:
2The hook used to read a Context's value is:
3Context is best suited for:
4The component that supplies the Context value is:

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5Context is created with create().
6A custom hook name must start with .
7Write a ThemeContext with createContext and a Provider wrapping children.
8Write a useTheme custom hook wrapping useContext(ThemeContext).
9Why shouldn't every piece of state be put into Context?

🚀 Section C · Challenge ● CHALLENGE 5

10Design a full AuthProvider with user state, login, and logout functions, and a useAuth hook — write the code.
💭 Reflection — the most useful thing I learned:
A ___/4   B ___/11   C ___/5   Total ___/20 Teacher's Signature Parent's Signature
✂ answer key — fold or cut before handing out

1-B   2-B   3-B   4-B  |  5 = Context   6 = use   7 = const ThemeContext=createContext(); function ThemeProvider({children}){const [theme,setTheme]=useState("dark");return <ThemeContext.Provider value={{theme,setTheme}}>{children}</ThemeContext.Provider>;}   8 = export const useTheme=()=>useContext(ThemeContext);   9 = Because unrelated components would re-render whenever any Context value changes, and it couples components together unnecessarily — local component state should stay local  |  10 = const AuthContext=createContext(null); export function AuthProvider({children}){const [user,setUser]=useState(null); const login=async(email,pw)=>{const data=await loginAPI(email,pw);setUser(data.user);}; const logout=()=>setUser(null); return <AuthContext.Provider value={{user,login,logout}}>{children}</AuthContext.Provider>;} export const useAuth=()=>useContext(AuthContext);

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.
🗒 Cheat Sheet