React Practices
Fourteen classic frontend problems, each built from scratch with no third-party libraries. Pick one to see the live demo and the notes behind it.
14 of 14 practices built
- 01BuiltToast / Notification SystemQueued, auto-dismissing notifications with pause on hover and stacking.
- 02BuiltSearchable AccordionExpandable sections filtered by a search query, with match highlighting.
- 03BuiltInfinite ScrollLoad the next page as the user nears the end of the list.
- 04BuiltCustom Data-Fetching Hook with CachingA reusable fetch hook with caching, deduplication, and stale data handling.
- 05BuiltReal-Time Chat UILive message stream with optimistic sends and auto-scroll.
- 06BuiltFile Upload with ProgressDrag-and-drop uploads with per-file progress, cancel, and retry.
- 07BuiltVirtualized Large ListsRender only the visible rows of a very large list.
- 08BuiltAccessible ModalA dialog with focus trap, Escape to close, and focus restore.
- 09BuiltContext + useReducer State ManagementApp state with a reducer, typed actions, and context without extra re-renders.
- 10BuiltMulti-Step FormA wizard with per-step validation, back navigation, and a review step.
- 11BuiltLazy-Loaded ImagesLoad images only when they approach the viewport, with placeholders.
- 12BuiltDebounced Search + API CacheSearch-as-you-type that debounces input, caches results, and drops stale responses.
- 13BuiltAdvanced Data GridSorting, filtering, pagination, column resizing, and row selection.
- 14BuiltLarge Dataset Performance OptimizationMeasure and fix slow renders on big datasets, naive vs optimized.