React Ref Patterns

Refs provide direct access to DOM elements and persist values across renders. Here's how to use them.

Ref with Intersection Observer#

Loading code block...

Best Practices#

Usage:
✓ Use refs for DOM access
✓ Store mutable values that don't trigger renders
✓ Use forwardRef for reusable components
✓ Prefer controlled components when possible

Patterns:
✓ useImperativeHandle for custom API
✓ Callback refs for measurement
✓ Merge refs when needed
✓ Keep refs stable

Avoid:
✗ Overusing refs for state
✗ Directly mutating DOM in render
✗ Ignoring null checks
✗ Creating refs in loops without keys

Refs enable direct DOM access and mutable value storage. Use forwardRef for component composition, useImperativeHandle for custom APIs, and callback refs for dynamic scenarios. Always handle null cases and prefer React's declarative patterns when possible.

React Ref Patterns

Basic useRef#

forwardRef#

useImperativeHandle#

Ref Callbacks#

Combining Multiple Refs#

Ref with Intersection Observer#

Previous Value Ref#

Latest Value Ref#

DOM Manipulation#

Canvas Ref#

Best Practices#

Conclusion#

Share this article

Related articles

React Refs and Forwarding

React Ref Callback Pattern

React Ref Forwarding Guide