Referencing Values with Refs

Question 1

Referencing values with Refs

Answer 1

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.

Question 2

Accessing Refs

Answer 2

You can access the current value of that ref through the ref.current property.

This value is intentionally mutable, meaning you can both read and write to it. It’s like a secret pocket of your component that React doesn’t track.

This is what makes it an “escape hatch” from React’s one-way data flow

Question 3

Refs and re-renders

Answer 3

Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not!

Question 4

When to use refs

Answer 4

Typically, you will 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:

• Storing timeout IDs
• Storing and manipulating DOM elements, which we cover on the next page
• Storing other objects that aren’t necessary to calculate the JSX.

If your component needs to store some value, but it doesn’t impact the rendering logic, choose refs.

Question 5

Best practices for refs

Answer 5

Following these principles will make your components more predictable:

• Treat refs as an escape hatch. Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach.
• Don’t read or write ref.current during rendering. If some information is needed during rendering, use state instead.

Since React doesn’t know when ref.current changes, even reading it while rendering makes your component’s behavior difficult to predict. (The only exception to this is code like if (!ref.current) ref.current = new Thing() which only sets the ref once during the first render.)

Limitations of React state don’t apply to refs. For example, state acts like a snapshot for every render and doesn’t update synchronously. But when you mutate the current value of a ref, it changes immediately:

ref. current = 5;
console. log(ref.current); // 5

This is because the ref itself is a regular JavaScript object, and so it behaves like one.

You also don’t need to worry about avoiding mutation when you work with a ref. As long as the object you’re mutating isn’t used for rendering, React doesn’t care what you do with the ref or its contents.

Question 6

Refs and the DOM

Answer 6

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>, React will put the corresponding DOM element into myRef.current. </div>