The React hooks you actually need

You know that feeling when you're building a React app and you realize you're writing the same useState patterns for the hundredth time? localStorage persistence, debounced search inputs, click outside detection—the same boilerplate over and over.

What if instead of reinventing these patterns or wrestling with heavyweight libraries, you could just copy proven implementations directly into your codebase?

This approach solves the custom hook problem we've all been quietly suffering through for years.

Your first 5 minutes with shadcn hooks

npx shadcn@latest add https://www.shadcn.io/registry/use-local-storage.json

import { useLocalStorage } from "@/hooks/use-local-storage";

function MyComponent() {
  const [user, setUser] = useLocalStorage("user", null);
  return <div>Welcome {user?.name}!</div>;
}

Why this approach actually works

Here's what happens when you own your hooks instead of fighting with a library:

Debugging becomes simple. When something breaks, you open the file and fix it. No more digging through node_modules or waiting for library maintainers.

Customization is just coding. Need different debounce timing? Custom localStorage serialization? The code is right there.

Better bundle sizes. You only ship what you use. No massive utility libraries for three hooks. Tree-shaking actually works when you can delete unused code.

Hooks evolve with your product. That useLocalStorage from two years ago? Extend it for your new features instead of working around library limitations.

What makes these hooks different

These aren't toy examples or half-baked implementations. Every hook here is:

Production-tested patterns
Each hook solves real problems we've encountered in production apps. The useDebounceValue hook prevents unnecessary API calls. The useOnClickOutside hook handles complex modal interactions. Real solutions for real apps.

TypeScript-first design
Full type safety out of the box. Generic constraints where they make sense, proper return types, and IntelliSense support that actually helps you write better code.

Zero external dependencies
These hooks depend only on React. No mysterious dependencies in your bundle, no version conflicts, no security audits for code you didn't write.

SSR and hydration safe
Every hook that touches browser APIs properly handles server-side rendering. No more "window is not defined" errors or hydration mismatches.

The philosophy behind owning your hooks

There's a reason these hooks are distributed as copy-paste code instead of npm packages. When you install a hook library, you're betting that the maintainer's API decisions will align with your needs forever.

But hooks are different from components. They're closer to utility functions—small, focused pieces of logic that you often need to modify. When your product requirements change and you need to extend how useInterval works, you want to edit the code, not work around a library API.

The hooks that started a revolution

Here are the ones that end up in almost every project:

When you need them (and when you don't)

Use these hooks when:

• You're tired of writing the same patterns repeatedly
• You need the functionality but want to own the implementation
• Your team values code ownership over external dependencies
• You're building production apps that need reliable, tested solutions

Stick with basic React when:

• You need simple state that doesn't require special handling
• The built-in hooks already solve your problem perfectly
• You're prototyping or learning and want to understand the fundamentals

Categories that matter

Questions you might have