Component design patterns and rendering strategies for React and Next.js. From patterns.dev/react.
| Skill | Type | Description |
|---|---|---|
hooks-pattern |
Design | Use functions to reuse stateful logic among multiple components |
hoc-pattern |
Design | Pass reusable logic down as props to components |
compound-pattern |
Design | Create multiple components that work together to perform a single task |
render-props-pattern |
Design | Pass JSX elements to components through props |
presentational-container-pattern |
Design | Enforce separation of concerns by separating the view from the application logic |
ai-ui-patterns |
Design | Design patterns for building AI-powered interfaces like chatbots and assistants |
react-2026 |
Design | Comprehensive guide to building React apps with a modern 2026 stack |
client-side-rendering |
Rendering | Render your application's UI on the client |
server-side-rendering |
Rendering | Generate HTML to be rendered on the server in response to a user request |
static-rendering |
Rendering | Deliver pre-rendered HTML content that was generated when the site was built |
incremental-static-rendering |
Rendering | Update static content after you have built your site |
streaming-ssr |
Rendering | Stream HTML to the client as it is generated on the server |
progressive-hydration |
Rendering | Delay loading JavaScript for less important parts of the page |
react-server-components |
Rendering | Server Components compliment SSR, rendering without adding to the JS bundle |
react-selective-hydration |
Rendering | Combine streaming server-side rendering with selective hydration |