Refs provide direct access to DOM elements and component instances. Here's how to use them effectively.
Basic useRef
Loading code block...
Callback Refs
Loading code block...
forwardRef
Loading code block...
useImperativeHandle
Loading code block...
Video Player Example
Loading code block...
Form Control Example
Loading code block...
Merging Refs
Loading code block...
Avoiding Common Pitfalls
Loading code block...
Best Practices
When to Use Refs:
✓ DOM element access (focus, scroll, measure)
✓ Storing timeout/interval IDs
✓ Storing previous values
✓ Imperative animations
✓ Third-party library integration
When NOT to Use Refs:
✗ Data that affects rendering (use state)
✗ Avoiding re-renders (consider memo)
✗ Storing component state
✗ Communication between components
forwardRef:
✓ Use for reusable components
✓ Add displayName for debugging
✓ Document exposed ref API
✓ Consider useImperativeHandle
useImperativeHandle:
✓ Expose minimal API
✓ Hide implementation details
✓ Type the handle interface
✓ Include cleanup in return
Conclusion
Refs provide escape hatches for DOM access and imperative operations. Use useRef for direct element access, forwardRef to pass refs through components, and useImperativeHandle to expose custom APIs. Remember that refs don't trigger re-renders and should be accessed in effects or event handlers.