#hooks
12 snippets tagged with #hooks
useFetch — Generic Data Fetching Hook
Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.
useDebounce — Debounced Value Hook
Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.
useLocalStorage — Persistent State Hook
Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.
useClickOutside — Outside Click Detection
Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.
useMediaQuery — Responsive Breakpoint Hook
Subscribe to CSS media query changes and get a boolean flag for responsive rendering logic in React.
Infinite Scroll with Intersection Observer
Load more items as the user scrolls using IntersectionObserver. No external libraries required.
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.
useWindowSize Hook
Track browser window dimensions with debounced resize handling for responsive component logic.
useCopyToClipboard Hook
Copy text to clipboard with success state and automatic reset timer using the Clipboard API.
useFormValidation Hook
Lightweight form validation hook with field-level errors, touched tracking, and submit handling.
Git Hooks Pre-Commit Example
Git pre-commit and commit-msg hooks to enforce linting, tests, and commit message conventions.