What are refs and why do we need them?

Q: What are refs and why do we need them?

ref returns a reference to the element. Refs are an escape hatch to hold onto values that aren’t used for rendering. You won’t need them often. A ref is a plain JavaScript object with a single property called current, which you can read or set. You can ask React to give you a ref by calling the useRef Hook. Like state, refs let you retain information between re-renders of a component. Unlike state, setting the ref’s current value does not trigger a re-render. Don’t read or write ref.current during rendering. This makes your component hard to predict. If your component needs to store some value, but it doesn’t impact the rendering logic, choose refs. Storing timeout IDs Storing and manipulating DOM elements Storing other objects that aren’t necessary to calculate the JSX.

Difficulty: 4/10

useRef, forwardRef, DOM access

We use refs when you want a component to “remember” some information, but don’t want that information to trigger new renders.

Points to remember:

1
ref returns a reference to the element.
2
Refs are an escape hatch to hold onto values that aren’t used for rendering. You won’t need them often.
3
A ref is a plain JavaScript object with a single property called current, which you can read or set.
4
You can ask React to give you a ref by calling the useRef Hook.
5
Like state, refs let you retain information between re-renders of a component.
6
Unlike state, setting the ref’s current value does not trigger a re-render.

We use a ref when your component needs to “step outside” React and communicate with external APIs—often a browser API that won’t impact the appearance of the component. Here are a few of these rare situations:

1
If your component needs to store some value, but it doesn’t impact the rendering logic, choose refs.
2
Storing timeout IDs
3
Storing and manipulating DOM elements
4
Storing other objects that aren’t necessary to calculate the JSX.

Scenario Questions

0-2 years experience

Follow-up Questions