Ref forwarding passes a ref through a component to a child element. Here's how to use it effectively.
Basic Ref Forwarding#
Loading code block...
With TypeScript#
Loading code block...
Button Component#
Loading code block...
Forwarding to Multiple Elements#
Loading code block...
Custom Modal#
Loading code block...
Scroll Container#
Loading code block...
Video Player#
Loading code block...
Higher-Order Component#
Loading code block...
Compound Components#
Loading code block...
Best Practices#
When to Use:
✓ Wrapping DOM elements
✓ Building component libraries
✓ HOC that wrap components
✓ Compound components
useImperativeHandle:
✓ Expose limited API
✓ Custom methods
✓ Multiple element refs
✓ Complex interactions
TypeScript:
✓ Specify element type
✓ Define custom handle type
✓ Extend HTML attributes
✓ Document exposed methods
Avoid:
✗ Exposing entire DOM node
✗ Overusing imperative APIs
✗ Forgetting displayName
✗ Complex ref hierarchies
Conclusion#
Ref forwarding enables passing refs through components to DOM elements. Use forwardRef for simple cases, combine with useImperativeHandle to expose custom APIs. This pattern is essential for component libraries, accessibility, and integrating with third-party libraries that need DOM access. Keep exposed APIs minimal and well-documented.