ReactJS Interview Prep - React Hooks (Part 3)

Question 1

What object does the `useRef(initialValue)` hook return?

Accepted Answer

Correct Answer

Answer

An array `[value, setValue]`.

Answer

A plain JavaScript object with a single mutable property called `current` (e.g., `{ current: initialValue }`).

Answer

A string ID.

Answer

A getter and setter function.

Question 2

What are the two primary use cases for the `useRef` hook?

Accepted Answer

Correct Answer

Answer

Fetching data and parsing JSON.

Answer

Accessing native DOM elements directly, and storing mutable instance variables that persist across renders without triggering a re-render when changed.

Answer

Managing global state and overriding CSS.

Answer

Caching API responses and memoizing functions.

Question 3

Why doesn't updating a `useRef`'s current value trigger a component re-render?

Accepted Answer

Correct Answer

Answer

Because it is managed by the browser, not React.

Answer

Because the ref object itself remains the exact same object reference in memory across all renders. Modifying its `.current` property does not notify React's reconciliation engine.

Answer

Because it is strictly read-only.

Answer

It actually does trigger a re-render in React 18.

Question 4

If you want to focus an input field when a component mounts, how do you achieve this with `useRef`?

Accepted Answer

Correct Answer

Answer

Pass `autoFocus` to the `useRef` hook.

Answer

Create `const inputRef = useRef(null);`, pass it to `<input ref={inputRef} />`, and inside a `useEffect(..., [])`, call `inputRef.current.focus()`.

Answer

Use `document.getElementById('input').focus()`.

Answer

Call `inputRef.focus()` directly in the render body.

Question 5

What happens if you try to render a ref directly in JSX (e.g., `

{myRef}

`)?

Accepted Answer

Correct Answer

Answer

It renders the value of `.current`.

Answer

React throws an error because `myRef` is an object (`{ current: ... }`), and React cannot render raw objects.

Answer

It renders the DOM node's HTML as a string.

Answer

It automatically extracts the text content.

Question 6

Why should you avoid reading or writing to `ref.current` directly during the rendering phase (inside the main component body)?

Accepted Answer

Correct Answer

Answer

It slows down the Webpack compiler.

Answer

The render phase must be pure and side-effect free. Reading/writing mutable refs during render makes your component unpredictable and breaks Concurrent Mode in React 18.

Answer

It causes an infinite loop.

Answer

The ref does not exist until the component unmounts.

Question 7

How can you access the previous state of a variable (before the current render) using hooks?

Accepted Answer

Correct Answer

Answer

Using the `usePrevious` hook provided by React.

Answer

By utilizing a `useRef`. Update the ref with the current state inside a `useEffect`. Because `useEffect` runs *after* render, the ref will always hold the value from the previous render during the next render cycle.

Answer

By passing `history: true` to `useState`.

Answer

It is impossible in functional components.

Question 8

If you are implementing a Stopwatch component, why should you store the `setInterval` ID in a `useRef` rather than `useState`?

Accepted Answer

Correct Answer

Answer

Because `useState` only accepts strings.

Answer

Because the timer ID is needed to call `clearInterval`, but changing the ID does not need to trigger a visual UI update on the screen. `useRef` is perfect for non-visual mutable data.

Answer

Because `setInterval` crashes if passed to state.

Answer

Because refs are automatically cleared on unmount.

Question 9

How does `useRef` differ from just declaring a regular JavaScript variable (e.g., `let timerId = 0;`) outside the component?

Accepted Answer

Correct Answer

Answer

They are functionally identical.

Answer

A variable outside the component is global. If you render the component twice on the same page, both instances will share and overwrite the same global `timerId`. `useRef` is safely scoped to each specific component instance.

Answer

Global variables cannot be used in `useEffect`.

Answer

`useRef` is hardware accelerated.

Question 10

How does `useRef` differ from just declaring a regular JavaScript variable (e.g., `let timerId = 0;`) INSIDE the component body?

Accepted Answer

Correct Answer

Answer

Local variables are immune to closures.

Answer

A local variable inside the component is recreated from scratch (reset to 0) every single time the component re-renders. `useRef` persists its value across renders.

Answer

Local variables cannot be passed to event handlers.

Answer

There is no difference.

Question 11

What happens to a `useRef` value when a component unmounts?

Accepted Answer

Correct Answer

Answer

It is saved to `localStorage` automatically.

Answer

The ref object is destroyed and garbage collected along with the component instance. All data inside `.current` is lost.

Answer

It is passed back to the parent component.

Answer

It persists globally until the browser refreshes.

Question 12

If you try to attach a ref to a custom functional component (e.g., `<MyCustomInput ref={inputRef} />`), what happens?

Accepted Answer

Correct Answer

Answer

It works perfectly.

Answer

React throws a console warning. Functional components do not have instances. You must use `React.forwardRef` to pass the ref down into the component's internal DOM node.

Answer

The ref points to the Virtual DOM representation of the component.

Answer

The component is forced to re-render endlessly.

Question 13

How do you implement `forwardRef` with a functional component?

Accepted Answer

Correct Answer

Answer

`const MyInput = forwardRef((props, ref) => <input {...props} ref={ref} />)`

Answer

`const MyInput = (props) => <input ref={props.ref} />`

Answer

`const MyInput = forwardRef((ref) => <input ref={ref} />)`

Answer

`const MyInput = (props) => { const ref = useForwardRef(); ... }`

Question 14

What is the `useImperativeHandle` hook used for?

Accepted Answer

Correct Answer

Answer

To forcefully halt the rendering cycle.

Answer

To customize the instance value that is exposed to parent components when using `ref`. Instead of handing the parent the raw DOM node, you hand them an object with specific limited functions (like `focus()` or `reset()`).

Answer

To manage extremely complex state arrays.

Answer

To handle global window events imperatively.

Question 15

Where must `useImperativeHandle` be used?

Accepted Answer

Correct Answer

Answer

Inside the parent component.

Answer

Inside a child component that has been wrapped in `React.forwardRef`.

Answer

Inside a `useEffect`.

Answer

Inside an Error Boundary.

Question 16

Is it considered good practice to use refs to manage form data (e.g., uncontrolled inputs) instead of `useState`?

Accepted Answer

Correct Answer

Answer

Yes, it is the modern React standard.

Answer

No. While possible (Uncontrolled Components), using `useState` (Controlled Components) is the highly recommended standard because it enables instant validation, dynamic UI updates, and strict single-source-of-truth.

Answer

Yes, because it improves security.

Answer

It is strictly illegal in React 18.

Question 17

If you need a ref to a list of elements generated by a `.map()`, what is the best approach?

Accepted Answer

Correct Answer

Answer

Create a new `useRef` inside the `.map()` loop.

Answer

Pass a callback function to the `ref` attribute (e.g., `ref={(node) => myRefs.current[index] = node}`), storing the nodes in a single ref array/Map.

Answer

Use `document.querySelectorAll`.

Answer

It is impossible to ref multiple elements.

Question 18

When using a Callback Ref, when does React call the function?

Accepted Answer

Correct Answer

Answer

Only when the user clicks the element.

Answer

React calls it with the DOM node when the component mounts, and calls it again with `null` when it unmounts.

Answer

It calls it continuously during the render phase.

Answer

Only when an error occurs.

Question 19

Can a `useRef` be used as a dependency in a `useEffect` array? (e.g., `useEffect(..., [myRef.current])`)

Accepted Answer

Correct Answer

Answer

Yes, and it works perfectly.

Answer

No. Because mutating a ref does not trigger a re-render, changing `myRef.current` will NOT cause the effect to run. The effect only evaluates dependencies during a render.

Answer

Yes, but only in strict mode.

Answer

It causes a syntax error.

Question 20

If a parent component wants to trigger a specific animation inside a child component, how could it achieve this imperatively?

Accepted Answer

Correct Answer

Answer

By setting the child's state directly.

Answer

By attaching a `ref` to the child (via `forwardRef`), using `useImperativeHandle` in the child to expose a `startAnimation()` function, and having the parent call `childRef.current.startAnimation()`.

Answer

By using Redux strictly.

Answer

By mutating the child's CSS classes via `document.getElementById`.

Question 21

Which of the following is an anti-pattern when using `useRef`?

Accepted Answer

Correct Answer

Answer

Storing a `setTimeout` ID.

Answer

Accessing a `<video>` element to call `.play()`.

Answer

Storing data that needs to be displayed on the screen (like a username or a counter).

Answer

Keeping track of whether a component is mounted or not.

Question 22

What does React guarantee about the `.current` property of a `useRef` object?

Accepted Answer

Correct Answer

Answer

It will always be a string.

Answer

It is deeply immutable.

Answer

It will persist for the full lifetime of the component, across all renders.

Answer

It will be cleared automatically on every re-render.

Question 23

If you need to measure the size of a DOM node (e.g., its width) immediately when it mounts, what should you use?

Accepted Answer

Correct Answer

Answer

`useState` with `window.innerWidth`.

Answer

A Callback Ref. When the node mounts, the callback fires with the node, allowing you to immediately call `node.getBoundingClientRect()` and update state.

Answer

A CSS media query.

Answer

`useRef` combined with a `setTimeout`.

Question 24

Is `useRef` synchronous or asynchronous?

Accepted Answer

Correct Answer

Answer

Asynchronous.

Answer

Synchronous. When you mutate `ref.current = 5`, it is updated immediately on that exact line of code.

Answer

It depends if it is inside a promise.

Answer

It resolves on the next frame paint.

Question 25

What is the equivalent of `useRef` in the older Class Component architecture?

Accepted Answer

Correct Answer

Answer

`this.state`

Answer

`this.props`

Answer

Instance variables (e.g., `this.myVar = 5` or `this.myRef = React.createRef()`).

Answer

`this.context`

Academy

ReactJS Interview Prep - React Hooks (Part 3)