React Design Patterns
An interactive catalog of 57 React patterns. Every pattern is a component that actually runs, with the source that renders it shown directly underneath.
- Period
- Context
- My role
The problem
Pattern write-ups are usually a code block and a paragraph. You cannot tell whether a pattern actually helps until you interact with it and watch what it does to renders — so the catalog had to run the code, not describe it.
How it was built
A registry with nothing to register
A pattern is a folder under src/patterns containing a meta file, a demo component and whatever supporting files it needs. The registry discovers it and the route appears. There is no index to update, which is the only reason a catalog this size stays consistent.
Highlighting that never reaches the browser
A small Vite plugin resolves ?highlight imports into pre-rendered Shiki markup at build time, so no highlighter and no grammars ship to the client. Tokens carry both light and dark palettes as CSS custom properties, so theme switching is a variable change rather than a re-highlight.
Deliberately no StrictMode
StrictMode double-invokes render in development. Several demos here are built around render counts that have to mean something, and a counter reporting two renders where React commits one would teach the wrong lesson. The trade-off is documented in the README so nobody 'fixes' it.
Where it landed
- 57 patterns across 8 categories, from composition and state to classic GoF patterns and anti-patterns
- Each entry covers the problem, a live demo, the full source, and when not to use it
- Zero highlighter JavaScript in the client bundle
Specification
- Scale
- Framework
- Build
- Styling
- Deploy