5 Custom Hooks I Copy to Every React Project

Every time I start a new React project, I copy the same 5 hooks. Not from a library — from my own collection, battle-tested across 15+ production apps. These aren't clever abstractions. They're boring, reliable utilities that eliminate the same bugs I've fixed dozens of times. Senior engineers don't write more code. They carry better defaults. Here are the 5, with full TypeScript implementations you can copy today. 1. useDebounce — Stop Hammering Your API The most common performance bug in React: firing an API call on every keystroke. Search inputs, autocomplete fields, filter forms — they all need debouncing. import { useState , useEffect } from ' react ' ; function useDebounce < T > ( value : T , delay : number = 300 ): T { const [ debouncedValue , setDebouncedValue ] = useState < T > ( value ); useEffect (() => { const timer = setTimeout (() => { setDebouncedValue ( value ); }, delay ); return () => { clearTimeout ( timer ); }; }, [ value , delay ]); return debouncedValue ; } Usage: