🗒 Cheat Sheet← Lesson
BitWithBite
React Worksheet

🔧 Custom Hooks

Chapter: State & Hooks — Core Patterns · Level ★★★ · Time: 20 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Follow custom hook naming rulesWrite useFetchWrite useLocalStorageExplain why to extract a hook
📚 Quick Recap

🎯 What you'll practice: Building reusable custom hooks like useFetch and useLocalStorage.

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

1A custom hook's name must start with:
2A custom hook is fundamentally:
3useLocalStorage syncs state with:
4You should extract a custom hook when:

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

5useFetch returns { data, loading, }.
6localStorage.setItem requires the value to be a (use JSON.stringify).
7Write a minimal useFetch(url) hook returning { data, loading }.
8Write a useLocalStorage(key, init) hook.
9Why does extracting useFetch reduce boilerplate across a whole app?

🚀 Section C · Challenge ● CHALLENGE 5

10Design a useDebounce(value, delay) custom hook that only updates its returned value after the input stops changing for "delay" ms. Outline the approach.
💭 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 = error   6 = string   7 = function useFetch(url){const [data,setData]=useState(null);const [loading,setLoading]=useState(true);useEffect(()=>{fetch(url).then(r=>r.json()).then(setData).finally(()=>setLoading(false));},[url]);return {data,loading};}   8 = function useLocalStorage(key,init){const [val,setVal]=useState(()=>JSON.parse(localStorage.getItem(key))??init);const set=v=>{setVal(v);localStorage.setItem(key,JSON.stringify(v));};return [val,set];}   9 = Every component that needs to fetch data would otherwise repeat the same loading/error/data useState+useEffect boilerplate; extracting it once means every component just calls useFetch(url)  |  10 = Store the value in useState, and in a useEffect keyed on [value, delay], set a setTimeout that updates the debounced state after "delay" ms — with a cleanup function that clears the timeout if value changes again before it fires.

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