15 React Hooks That Will Make You a 10x Developer in 2026

function SearchResults() {
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState<Item[]>([]);

  function handleSearch(e: React.ChangeEvent<HTMLInputElement>) {
    // Typing stays instant — this update is high priority
    setQuery(e.target.value);

    // Filtering 10k items is low priority — won't block the input
    startTransition(() => {
      setResults(filterItems(e.target.value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleSearch} />
      {isPending && <Spinner />}
      <ItemList items={results} />
    </>
  );
}

function AutocompleteSearch({ query }: { query: string }) {
  // React keeps showing stale results while computing new ones
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  const suggestions = useMemo(
    () => filterSuggestions(deferredQuery),
    [deferredQuery]
  );

  return (
    <ul style={{ opacity: isStale ? 0.6 : 1 }}>
      {suggestions.map((item) => (
        <li key={item.id}>{item.label}</li>
      ))}
    </ul>
  );
}

function TodoList({ todos, addTodoAction }: Props) {
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo: string) => [
      ...state,
      { id: crypto.randomUUID(), text: newTodo, pending: true },
    ]
  );

  async function handleSubmit(formData: FormData) {
    const text = formData.get("todo") as string;
    addOptimistic(text);      // Instant UI update
    await addTodoAction(text); // Server catches up
  }

  return (
    <form action={handleSubmit}>
      <input name="todo" />
      <button type="submit">Add</button>
      {optimisticTodos.map((todo) => (
        <div key={todo.id} style={{ opacity: todo.pending ? 0.6 : 1 }}>
          {todo.text}
        </div>
      ))}
    </form>
  );
}

// Must be a CHILD of the <form> — won't work in the same component
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function ContactForm({ submitAction }: { submitAction: (fd: FormData) => Promise<void> }) {
  return (
    <form action={submitAction}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <SubmitButton />
    </form>
  );
}

function useDebounce<T>(value: T, delayMs: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delayMs);
    return () => clearTimeout(timer);
  }, [value, delayMs]);

  return debouncedValue;
}

// Usage — search API only fires after 300ms of silence
function SearchBar() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) fetchResults(debouncedQuery);
  }, [debouncedQuery]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

function useLocalStorage<T>(key: string, initialValue: T) {
  const [stored, setStored] = useState<T>(() => {
    if (typeof window === "undefined") return initialValue;
    try {
      const item = window.localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback(
    (value: T | ((prev: T) => T)) => {
      setStored((prev) => {
        const next = value instanceof Function ? value(prev) : value;
        window.localStorage.setItem(key, JSON.stringify(next));
        return next;
      });
    },
    [key]
  );

  return [stored, setValue] as const;
}

// Usage — persists across sessions automatically
const [theme, setTheme] = useLocalStorage("theme", "light");

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>(undefined);

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

// Usage — animate only when count actually changes
function Counter({ count }: { count: number }) {
  const prevCount = usePrevious(count);
  const direction = prevCount !== undefined && count > prevCount ? "up" : "down";

  return (
    <motion.span key={count} animate={{ y: direction === "up" ? -10 : 10 }}>
      {count}
    </motion.span>
  );
}

function useIntersectionObserver(
  ref: RefObject<Element | null>,
  options?: IntersectionObserverInit
) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      options
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [ref, options]);

  return isVisible;
}

// Usage — lazy load images when they scroll into view
function LazyImage({ src, alt }: { src: string; alt: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const isVisible = useIntersectionObserver(ref, { threshold: 0.1 });

  return (
    <div ref={ref}>
      {isVisible ? <img src={src} alt={alt} /> : <Skeleton />}
    </div>
  );
}

function useCopyToClipboard() {
  const [copied, setCopied] = useState(false);

  const copy = useCallback(async (text: string) => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, []);

  return { copied, copy };
}

// Usage
function ShareLink({ url }: { url: string }) {
  const { copied, copy } = useCopyToClipboard();

  return (
    <button onClick={() => copy(url)}>
      {copied ? "Copied!" : "Copy link"}
    </button>
  );
}

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(
    typeof navigator !== "undefined" ? navigator.onLine : true
  );

  useEffect(() => {
    const goOnline = () => setIsOnline(true);
    const goOffline = () => setIsOnline(false);

    window.addEventListener("online", goOnline);
    window.addEventListener("offline", goOffline);
    return () => {
      window.removeEventListener("online", goOnline);
      window.removeEventListener("offline", goOffline);
    };
  }, []);

  return isOnline;
}

// Usage — show a banner when the user loses connection
function App() {
  const isOnline = useOnlineStatus();
  return !isOnline ? <Banner>You are offline</Banner> : <MainApp />;
}

function useIdle(timeoutMs = 30_000) {
  const [isIdle, setIsIdle] = useState(false);

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;
    const events = ["mousemove", "keydown", "scroll", "touchstart"];

    const reset = () => {
      setIsIdle(false);
      clearTimeout(timer);
      timer = setTimeout(() => setIsIdle(true), timeoutMs);
    };

    reset();
    events.forEach((e) => document.addEventListener(e, reset));
    return () => {
      clearTimeout(timer);
      events.forEach((e) => document.removeEventListener(e, reset));
    };
  }, [timeoutMs]);

  return isIdle;
}

// Usage — auto-lock sensitive dashboards
function AdminPanel() {
  const isIdle = useIdle(5 * 60 * 1000); // 5 minutes
  if (isIdle) return <LockScreen />;
  return <DashboardContent />;
}