useRef provides mutable references that persist across renders. Here's how to use it effectively.
Basic useRef#
Loading code block...
DOM References#
Loading code block...
Mutable Values#
Loading code block...
Previous Value Pattern#
Loading code block...
Callback Refs#
Loading code block...
Forwarding Refs#
Loading code block...
Avoiding Re-renders#
Loading code block...
Latest Value Pattern#
Loading code block...
Animation Refs#
Loading code block...
Scroll Management#
Loading code block...
TypeScript#
Loading code block...
Best Practices#
Use ref for:
✓ DOM element access
✓ Mutable values without re-render
✓ Timer/animation IDs
✓ Previous values
Patterns:
✓ useCallback for measurement refs
✓ forwardRef for component refs
✓ useImperativeHandle for custom API
✓ Cleanup in useEffect
Avoid:
✗ Reading ref.current during render
✗ Using ref for render-dependent data
✗ Overusing refs instead of state
✗ Forgetting null checks
Performance:
✓ Track values without re-renders
✓ Store computed values
✓ Cache DOM measurements
✓ Hold instance variables
Conclusion#
useRef provides persistent mutable values across renders. Use it for DOM access, storing values that don't affect rendering, tracking previous state, and holding timer/animation IDs. Unlike state, updating refs doesn't trigger re-renders. Remember that refs are null initially when used for DOM elements, so always check before accessing.