Custom Hooks

Step-by-step React custom hooks guide — naming conventions, dependency arrays, return shapes, testing, and extracting reusable stateful logic.

Two complementary hooks: useDebouncedValue delays a reactive value; useDebouncedCallback delays a function call.

Limit how often a fast-changing value updates during scroll, resize, or mouse-move events.

Show a back-to-top button after the user scrolls down and smoothly return them to the top on click.

Persist component state to localStorage so it survives refreshes and optionally syncs across browser tabs.

Respond to CSS media queries in JavaScript for responsive rendering and behavior that CSS alone can't handle.

Close dropdowns, modals, popovers, and context menus when the user clicks anywhere outside them.

Copy text to the clipboard with success and error feedback for copy buttons on code, API keys, and share links.

Detect when an element enters the viewport for lazy loading, infinite scroll, and animate-on-scroll effects.

Track the window's width and height in JavaScript for responsive layout, canvas sizing, and virtualized lists.

Bind keyboard shortcuts like Ctrl+K, Ctrl+S, or Escape to actions, with modifier-key support.

Manage boolean state with a clean toggle API instead of scattering manual flips through your JSX.

Track the previous value of a prop or state to detect changes, trigger animations, or skip redundant effects.

A lightweight data-fetching hook for simple cases and prototypes, with loading, error, and refetch handling.

Based on Dan Abramov's useInterval pattern, extended with pause/resume and dynamic delay.

Attach window, document, or element event listeners with automatic cleanup, fresh callbacks, and type-safe event types.