React

useFetch — Generic Data Fetching Hook

Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.

#hooks#fetch

useDebounce — Debounced Value Hook

Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.

#hooks#debounce

useLocalStorage — Persistent State Hook

Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.

#hooks#localstorage

useClickOutside — Outside Click Detection

Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.

#hooks#click-outside

useMediaQuery — Responsive Breakpoint Hook

Subscribe to CSS media query changes and get a boolean flag for responsive rendering logic in React.

#hooks#responsive

#error-boundary#error-handling

Error Boundary with Fallback UI

Class-based error boundary component that catches render errors and displays a customizable fallback UI.

Portal-Based Modal Component

Accessible modal component using React portals with focus trapping, Escape key close, and backdrop click.

#modal#portal

#infinite-scroll#intersection-observer

Infinite Scroll with Intersection Observer

Load more items as the user scrolls using IntersectionObserver. No external libraries required.

Optimistic Update Pattern

Apply UI changes immediately before server confirmation with automatic rollback on failure.

#optimistic-update#state

Context + useReducer State Management

Type-safe global state pattern combining React Context with useReducer for complex state without external libs.

#context#reducer

#hooks#intersection-observer

useIntersectionObserver Hook

Track element visibility with the Intersection Observer API for lazy loading and scroll animations.

usePrevious Hook

Track the previous value of any state or prop using a ref-based hook for comparison logic.

#hooks#state

useWindowSize Hook

Track browser window dimensions with debounced resize handling for responsive component logic.

#hooks#responsive

useCopyToClipboard Hook

Copy text to clipboard with success state and automatic reset timer using the Clipboard API.

#hooks#clipboard

#virtualization#performance

Virtualized List Component

Render large lists efficiently by only rendering visible items with calculated scroll positioning.

Drag & Drop Sortable List

Reorder list items with native HTML drag and drop events — no external library required.

#drag-drop#sortable

#patterns#compound-component

Compound Component Pattern

Build flexible compound components using React Context for implicit parent-child communication.

Render Prop Pattern

Share stateful logic between components using the render prop pattern for maximum flexibility.

#patterns#render-prop

useFormValidation Hook

Lightweight form validation hook with field-level errors, touched tracking, and submit handling.

#hooks#forms