Stop Copy-Pasting From Old Repos — Use These 30 React Hooks Instead
If you have been writing React for more than a few months, you already know the ritual. A new project spins up, and within the first few days you find yourself digging through an old repository trying to locate that one perfect hook you wrote six months ago. You copy it, paste it, rename a variable, and quietly pretend you wrote it fresh. It is one of the most universal experiences in frontend development, and there is absolutely no shame in it. The real question is: why are you leaving that knowledge scattered across old repos instead of keeping it somewhere useful?
This article collects 30 tiny, battle-tested React hooks that developers reach for again and again. No extra libraries, no npm install marathons, no unnecessary bloat. Each one is a self-contained snippet you can drop straight into any codebase and start using immediately. Bookmark this page — future you will genuinely appreciate it.
Why Custom React Hooks Matter for Every Project
React hooks changed everything about how we write components. They replaced lifecycle methods with something more composable, more readable, and far easier to test in isolation. But the true power of hooks was never just useState or useEffect on their own — it was the ability to combine them into custom hooks that encapsulate logic you would otherwise repeat dozens of times across a codebase.
Custom hooks keep your components lean. Instead of a 200-line component stuffed with debounce logic, scroll tracking, media query detection, and local storage management all tangled together, you get a clean component that calls four descriptive hooks and reads almost like plain English. That is good for collaboration, good for debugging, and good for your own sanity six months down the line.
The hooks in this list were chosen because they solve genuinely common problems — the kind that show up in nearly every frontend project regardless of domain. They are small enough to understand at a glance but powerful enough to save you real time.
The Categories You Will Find in This Collection
The 30 hooks covered in the original collection span several practical categories that frontend developers encounter constantly. Here is a high-level look at what is included and why each category matters.
Performance and Timing Hooks
One of the most commonly needed hooks in any interactive application is useDebounce. It delays updating a value until a user has stopped typing or interacting for a specified number of milliseconds — typically around 300 to 500ms. This single hook can eliminate dozens of unnecessary API calls in a search interface and dramatically improve perceived performance. The implementation uses useState to hold the debounced value and useEffect to set a timeout that resets on every change, clearing itself on cleanup. It takes roughly ten lines of code and replaces an entire class of performance bugs.
Alongside debounce, throttle hooks serve a similar purpose for continuous events like scroll or resize, where you want to allow updates at a controlled rate rather than blocking them entirely until activity stops.
Browser and DOM Interaction Hooks
A large portion of the collection focuses on bridging the gap between React state and native browser behavior. Hooks for detecting window size and media queries let you write fully responsive logic in JavaScript without relying solely on CSS breakpoints. A useLocalStorage hook persists state across page refreshes by syncing with the browser's local storage API, complete with JSON serialization and error handling. There are also hooks for tracking whether an element is visible in the viewport using the Intersection Observer API — invaluable for lazy loading, animation triggers, and infinite scroll implementations.
Clipboard hooks, scroll position hooks, and hooks that detect clicks outside a given element round out this category. The outside-click detection hook alone is something almost every dropdown, modal, and popover component eventually needs.
State Management Utilities
Several hooks in the collection tackle common state patterns that useState alone handles awkwardly. A usePrevious hook stores the previous value of any state or prop using a ref, which is useful whenever you need to compare the current render to the last one. A useToggle hook wraps boolean state with a stable toggle function, removing a tiny but constant source of boilerplate. There are also hooks for managing arrays and objects as state in a more declarative way, with add, remove, and update helpers built in.
Async and Data Fetching Hooks
Any application that talks to an API benefits from a consistent pattern for handling loading states, errors, and data. A lightweight useFetch hook wraps the native Fetch API with built-in loading and error state, optional dependency-based refetching, and cleanup on unmount to prevent state updates on unmounted components. While libraries like React Query and SWR offer more advanced caching strategies, a simple custom fetch hook covers a wide range of use cases without pulling in any dependencies.
How to Use These Hooks Effectively
The best approach is to create a dedicated hooks folder at the root of your src directory and add each hook as its own file. Name the files to match the hook — useDebounce.js, useLocalStorage.js, and so on. This makes them easy to import anywhere and easy to find when your team searches the codebase.
Each hook should be treated like a small utility function. Keep them focused on a single concern, write a brief comment explaining what it does and what arguments it accepts, and avoid letting them grow into something that belongs in a state management library instead.
The Real Value: Building Your Own Hook Library
Collections like this 30-hook set are most valuable when they inspire you to build and maintain your own internal library. Every project has unique patterns that repeat — authentication state, specific API response shapes, particular animation sequences. When you start treating those patterns as candidates for custom hooks rather than inline logic, your codebase becomes dramatically easier to work with over time.
Start with the hooks you copy most often. Extract them, clean them up, and keep them somewhere central. That small investment in organization pays back every time a new feature needs the same behavior your last feature already solved.
Final Thoughts
React's hook model gives frontend developers a genuinely powerful tool for code reuse, and 30 well-crafted custom hooks represent a solid foundation for almost any project. Whether you need to debounce a search input, detect a click outside a modal, persist state to local storage, or track an element's visibility, there is a tiny hook that handles it cleanly and without a single additional dependency. Copy them, adapt them, and build on top of them — that is exactly what they are there for.