In React, a ref is an object with a single .current property that persists between renders. Unlike state, updating a ref does not trigger a re-render of your component. This makes them the primary tool for escaping the standard React data flow. You can point a ref to any value. However, the most common use case for a ref is to access a DOM element.
For example, this is handy if you want to focus an input programmatically. When you pass a ref to a ref attribute in JSX, like <div ref={myRef}>, React will put the corresponding DOM element into myRef.current. Once the element is removed from the DOM, React will update myRef.current to be null.
Managing focus, text selection, or media playback.
Triggering imperative animations.
Timer IDs, previous props or state
External Library Instances (Mapbox/Google Maps, echarts)
Integrating with third-party DOM libraries.
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
