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.