Ref callbacks provide more control than useRef for dynamic scenarios. Here's how to use them.
Basic Ref Callback#
Loading code block...
Dynamic Element Lists#
Loading code block...
Focus Management#
Loading code block...
Intersection Observer#
Loading code block...
ResizeObserver#
Loading code block...
Animation Trigger#
Loading code block...
Third-Party Libraries#
Loading code block...
Merging Refs#
Loading code block...
Best Practices#
Usage:
✓ Use for measurement/observers
✓ Use for dynamic element lists
✓ Use for third-party integrations
✓ Wrap in useCallback when needed
Cleanup:
✓ Handle null (element unmounted)
✓ Disconnect observers
✓ Dispose library instances
✓ Clear stored references
Performance:
✓ Memoize with useCallback
✓ Avoid creating refs in loops
✓ Use Map for dynamic refs
✓ Batch state updates
Avoid:
✗ Side effects without cleanup
✗ Recreating refs unnecessarily
✗ Forgetting null checks
✗ Complex logic in callbacks
Conclusion#
Ref callbacks provide fine-grained control for measuring elements, managing observers, and integrating third-party libraries. Use them when useRef isn't flexible enough, especially for dynamic lists and elements that need setup/cleanup logic. Always handle the null case for proper cleanup.