BitWithBite
React · Quick Reference
Lesson 10 — Custom Hooks Cheat Sheet
In one line: A custom hook is a function starting with "use" that calls other hooks — extract one the moment you copy-paste the same pattern twice.
Rules
1Name starts with "use".
2Can call other hooks inside.
3Returns whatever the component needs.
useFetch Example
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};
}