11 snippets · production-ready JavaScript & TypeScript
A production-ready DataFetcher<T> component implementing the render props pattern in TypeScript React, with full type safety for loading, error, and success states.
A generic React hook that stores and returns the value from the previous render cycle, useful for comparing state changes and triggering animations.
A generic React hook that debounces any value by a specified delay in milliseconds, perfect for optimizing search inputs, API calls, and other performance-sensitive operations.
A complete implementation of the compound component pattern in React TypeScript, demonstrating how to build a flexible Tabs component (Tabs, Tabs.List, Tabs.Tab, Tabs.Panel) using Context API to share state without prop drilling.
A type-safe React hook that listens to CSS media queries and returns a boolean indicating whether the query matches. Handles SSR gracefully and cleans up listeners automatically.
A fully typed React hook for persisting state to localStorage with automatic JSON serialization, SSR compatibility, and real-time synchronization across browser tabs.
A custom React hook that fetches data with automatic request cancellation on unmount and race condition prevention using AbortController.
A production-ready React hook that wraps the Intersection Observer API, returning a ref and isIntersecting boolean with configurable threshold and rootMargin options.
A custom React hook that enables optimistic UI updates by immediately reflecting user actions while async operations complete in the background, with automatic rollback on failure.
A TypeScript implementation of createSelectableContext that provides a useContextSelector hook, allowing components to subscribe to specific slices of context state and re-render only when those slices change.
A TypeScript hook that returns a stable function reference (identity-stable across renders) while ensuring it always invokes the most recent callback. Essential for optimizing React performance with memoized components.