Render props is a pattern for sharing code between components using a prop whose value is a function.
Basic Render Props
Loading code block...
Using Children as Render Prop
Loading code block...
Functional Component Version
Loading code block...
Data Fetching Pattern
Loading code block...
Toggle Pattern
Loading code block...
Form State Pattern
Loading code block...
List Rendering Pattern
Loading code block...
Downshift-style Pattern
Loading code block...
Render Props vs Hooks
Loading code block...
Best Practices
When to Use Render Props:
✓ Cross-cutting concerns
✓ Reusable stateful logic
✓ Flexible component composition
✓ When hooks aren't an option
Pattern Guidelines:
✓ Use children as function for cleaner JSX
✓ Provide sensible defaults
✓ Document the render prop API
✓ Memoize callbacks when needed
Performance:
✓ Avoid creating functions in render
✓ Use useCallback for stable references
✓ Consider React.memo for children
✓ Profile before optimizing
Prefer Hooks When:
✓ Logic can be extracted as hook
✓ No wrapper element needed
✓ Multiple consumers in same component
✓ Simpler composition
Conclusion
Render props enable flexible component composition by passing rendering logic as a function prop. While hooks have largely replaced render props for sharing logic, the pattern remains useful for component libraries and specific use cases where flexible rendering is needed. Use children as a function for cleaner syntax, and consider converting to hooks when the logic doesn't require rendering flexibility.