HomeReact
Chapter 19
19 — HOC, Render Props & Code Splitting
Advanced composition patterns and code splitting for performance.
Patterns Comparison
| Pattern | Use Case | Modern Alternative |
|---|---|---|
| HOC (Higher-Order Component) | Cross-cutting concerns (auth, logging) | Custom hooks |
| Render Props | Shared behavior with flexible rendering | Custom hooks |
| Code Splitting | Load code on demand | React.lazy + Suspense |
HOC (Higher-Order Component)
A function that takes a component and returns an enhanced component:
const EnhancedComp = withAuth(MyComponent);Render Props
A component that takes a function as children (or a prop) to delegate rendering:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>Code Splitting
Split your bundle so users only download what they need:
const LazyPage = lazy(() => import("./HeavyPage"));
<Suspense fallback={<Spinner />}><LazyPage /></Suspense>File
patterns.tsx— HOC examples, render props, lazy loading, route-based splitting, preloading