Refs with useRef Quiz

Question 1

What does useRef return?

Accepted Answer

A mutable object with a current property that React preserves between renders

Answer

A state value and a setter

Answer

A DOM node directly

Answer

A memoised callback

Question 2

What happens when you change ref.current?

Accepted Answer

The value changes with no re-render scheduled

Answer

React re-renders the component

Answer

React throws an error for mutating during render

Answer

The ref object is replaced

Question 3

Which value is best kept in a ref rather than state?

Accepted Answer

A timeout id used only for cleanup

Answer

The text shown in a heading

Answer

A validation error the user must see

Answer

Whether a modal is open

Question 4

Why is inputRef.current null during the first render?

Accepted Answer

The DOM node does not exist until React commits the render

Answer

Refs are always null in function components

Answer

You must call useRef twice

Answer

The ref attribute was misspelled

Question 5

Which of these is a poor use of a DOM ref?

Accepted Answer

Setting an element's text content directly

Answer

Calling focus() on an input

Answer

Measuring an element with getBoundingClientRect

Answer

Calling play() on a video

Question 6

What problem does forwardRef solve?

Accepted Answer

It lets a ref placed on a custom component reach a DOM node inside it

Answer

It makes refs re-render the component

Answer

It converts a ref into state

Answer

It creates refs in a loop

Question 7

What does useImperativeHandle do?

Accepted Answer

Chooses what the parent's ref.current will contain

Answer

Replaces useEffect for imperative code

Answer

Forces a re-render from a ref

Answer

Attaches multiple refs to one node