9. React Refs

Question 1

What is the primary purpose of Refs in React, as described in the text?

Answer 1

To get access to actual DOM elements when necessary, bypassing React’s abstraction.

Question 2

List two typical use cases for accessing the native DOM API in React.

Answer 2

Manually focusing an element after it’s rendered or calculating the size and boundaries of a component.

Question 3

Instead of using getElementById, what more powerful way does React provide to access DOM elements without spreading ids everywhere?

Answer 3

React provides Refs to access DOM elements in a more integrated way.

Question 4

In React, what is a Ref?

Answer 4

A mutable object that React preserves between component re-renders.

Question 5

Which React hook is used to create a Ref?

Answer 5

The useRef hook.

Question 6

After creating a Ref with const ref = useRef(initialValue), how do you access the value it holds?

Answer 6

You access the value through the ref.current property.

Question 7

What is the most significant difference between updating a Ref and updating state?

Answer 7

Updating a Ref’s .current property does not trigger a component re-render, whereas updating state does.

Question 8

Why can’t you use a Ref to display a character count for an input field that updates as the user types?

Answer 8

Because a Ref update doesn’t cause a re-render, the UI will not be updated to show the new count.

Question 9

If a component using a Ref for a value re-renders due to an unrelated state change, what happens to the displayed value from the Ref?

Answer 9

The displayed value will suddenly update to the latest value stored in the Ref.

Question 10

What is the second major difference between Ref updates and state updates regarding their execution timing?

Answer 10

Ref updates are synchronous and immediate, while state updates are typically asynchronous and batched by React.

Question 11

In an onChange handler, if you log a state variable immediately after calling its setValue function, what value will you see?

Answer 11

You will see the old state value, because state updates are scheduled and not immediate.

Question 12

In an onChange handler, if you log ref.current immediately after assigning a new value to it, what value will you see?

Answer 12

You will see the new, just-assigned value, because Ref mutation is a synchronous operation.

Question 13

Under what two conditions is it acceptable to use a Ref to store a value instead of state?

Answer 13

When the value is not used for rendering and is not passed as props to other components.

Question 14

What is a common use case for a Ref that doesn’t involve the DOM, such as tracking component information?

Answer 14

Counting how many times a component renders or storing the previous value of a prop or state.

Question 15

How do you assign a Ref created with useRef to a specific DOM element in JSX?

Answer 15

You pass the Ref object to the element’s ref attribute, like <input ref={myRef} />.

Question 16

In the component lifecycle, when does React assign the DOM element to the ref.current property?

Answer 16

The ref.current property is assigned only after the component has rendered and its corresponding DOM element has been created.

Question 17

Where in a function component should you safely access or modify ref.current to ensure the DOM element exists?

Answer 17

You should only access or modify ref.current within a useEffect hook or in event handler callbacks.

Question 18

If a parent component needs to call .focus() on an input inside a child component, what is the recommended approach using Refs?

Answer 18

Create the Ref in the parent, pass it down to the child, and attach it to the input element there.

Question 19

What happens if you try to pass a Ref to a functional component using the standard ref prop, like <MyComponent ref={myRef} />?

Answer 19

You will get a warning in the console, as functional components cannot be given refs directly this way.

Question 20

To allow a functional component to receive a Ref via the ref attribute, you must wrap that component in the _____ function.

Answer 20

forwardRef

Question 21

When a component is wrapped in forwardRef, how does it receive the forwarded ref?

Answer 21

The ref is passed as the second argument to the component function, right after props.

Question 22

The hook that allows you to customize the instance value that is exposed to parent components when using ref is called _____.

Answer 22

useImperativeHandle

Question 23

What is the purpose of creating an imperative API for a component?

Answer 23

To abstract away internal implementation details and expose specific functions (like .focus() or .shake()) for a parent to call.

Question 24

What are the three arguments passed to the useImperativeHandle hook?

Answer 24

The ref to be customized, a function that returns the API object, and a dependency array.

Question 25

In a component using `useImperativeHandle`, the object returned by the second argument (the factory function) becomes the value of what?

Answer 25

It becomes the value of the forwarded `ref.current` property in the parent component.

Question 26

What is a simpler alternative to `useImperativeHandle` for creating an imperative API on a component?

Answer 26

Manually assigning the API object to the passed-in `ref.current` property inside a `useEffect` hook.

Question 27

Is using an imperative API a common pattern in React?

Answer 27

No, it is considered an escape hatch; the normal props/callbacks data flow is preferred in most cases.

Question 28

Complete the code to create a Ref in a functional component: `const myRef = _____(null);`

Answer 28

useRef

Question 29

Fill in the blanks to wrap a component with `forwardRef`: `const InputField = forwardRef((_____, _____) => { return ; });`

Answer 29

props, ref

Question 30

In React, a Ref is a _____ object that can store any value and will be preserved between re-renders.

Answer 30

mutable

Question 31

Why is it a bad practice for a parent `Form` component to have direct access to a child `InputField`'s underlying DOM element?

Answer 31

It leaks internal implementation details and breaks the principle of separation of concerns.