ReactJS Interview Prep - React Hooks (Part 6)

Question 1

When migrating a Class Component to a Functional Component with Hooks, what replaces the `constructor`?

Accepted Answer

Correct Answer

Answer

`useEffect` with an empty array.

Answer

There is no direct replacement needed. State initialization happens directly in `useState()`, and method binding is no longer necessary because arrow functions naturally inherit the functional component's scope.

Answer

`useLayoutEffect`.

Answer

`useMemo`.

Question 2

What Hook pattern replaces `componentDidMount`?

Accepted Answer

Correct Answer

Answer

`useMount()`

Answer

`useEffect(() => { ... }, [])` (A `useEffect` with an empty dependency array).

Answer

`useLayoutEffect`.

Answer

`useState` with a callback.

Question 3

What Hook pattern replaces `componentWillUnmount`?

Accepted Answer

Correct Answer

Answer

`useUnmount()`

Answer

Returning a cleanup function from a `useEffect` that has an empty dependency array `[]`.

Answer

`useEffect(() => { return false; })`

Answer

`useCallback`.

Question 4

How do Hooks change the mental model of component lifecycles?

Accepted Answer

Correct Answer

Answer

They don't, it's just syntax sugar.

Answer

Classes force you to group unrelated logic by *time* (e.g., fetching user data AND setting up a timer both go in `componentDidMount`). Hooks allow you to group related logic by *feature* (e.g., one `useEffect` for user data, a separate `useEffect` for the timer).

Answer

They force you to use Redux.

Answer

They make all lifecycles synchronous.

Question 5

Why do hooks rely on Call Order?

Accepted Answer

Correct Answer

Answer

Because JavaScript is single-threaded.

Answer

React doesn't know the names of your state variables. It uses an internal array (or linked list) to track hooks. If the first hook is `useState`, it assigns state index 0 to it. Changing the call order corrupts this index mapping.

Answer

To prevent memory leaks.

Answer

To optimize the Virtual DOM.

Question 6

What happens if you use an asynchronous function directly as the first argument to `useMemo`?

Accepted Answer

Correct Answer

Answer

It will cache the resolved data.

Answer

It will cache the Promise object itself, not the resolved data, which is almost never what you want and usually leads to bugs.

Answer

It will throw a syntax error.

Answer

It will automatically await the promise.

Question 7

How do you correctly derive state (e.g., a filtered list based on a search term) from props using hooks?

Accepted Answer

Correct Answer

Answer

Use a `useEffect` to watch the search term, and call `setFilteredList(newArray)`.

Answer

Do not use state or effects at all. Simply calculate `const filteredList = list.filter(...)` directly in the component body. Wrap it in `useMemo` ONLY if the array is massive and calculation is slow.

Answer

Use `useReducer`.

Answer

Pass a callback to `useState`.

Question 8

If a functional component takes no props and has no internal state, what will cause it to re-render?

Accepted Answer

Correct Answer

Answer

It will never re-render.

Answer

It will re-render whenever its parent component re-renders, unless it is wrapped in `React.memo`.

Answer

It will re-render continuously.

Answer

Only window resize events.

Question 9

What does it mean that state updates in React are 'batched'?

Accepted Answer

Correct Answer

Answer

They are sent to the server in a batch.

Answer

If you call `setCount(1)`, `setName('John')`, and `setAge(30)` synchronously in a single function, React will group them together and only perform a single UI re-render, rather than three separate re-renders.

Answer

State is stored in a Batch database.

Answer

It prevents multiple users from updating state.

Question 10

If you have a form with a heavy validation algorithm that causes the UI to freeze while the user types, which React 18 hook should you use?

Accepted Answer

Correct Answer

Answer

`useMemo`

Answer

`useTransition` or `useDeferredValue`

Answer

`useLayoutEffect`

Answer

`useReducer`

Question 11

Can you call a hook inside a callback function passed to an event handler? (e.g., `<button onClick={() => { const [val] = useState() }}>`)

Accepted Answer

Correct Answer

Answer

Yes, if the handler is asynchronous.

Answer

No. Hooks can ONLY be called at the top level of a Functional Component or Custom Hook. Calling them inside an event handler violates the Rules of Hooks.

Answer

Only `useRef` is allowed in event handlers.

Answer

Yes, but it throws a warning.

Question 12

What is the consequence of passing an inline function to a `useEffect` dependency array? (e.g., `useEffect(..., [() => doSomething()])`)

Accepted Answer

Correct Answer

Answer

It runs asynchronously.

Answer

The effect will run infinitely. The inline function creates a new memory reference on every render, so the dependency check will always detect a change.

Answer

It optimizes the effect.

Answer

It throws a syntax error.

Question 13

What is the most effective way to share complex state and functions across an entire application using only native Hooks?

Accepted Answer

Correct Answer

Answer

Prop drilling down 10 levels.

Answer

Creating a `useReducer` to manage the complex state, and passing the `state` and `dispatch` down to the app via the Context API (`useContext`).

Answer

Using a global `useRef`.

Answer

Storing everything in LocalStorage.

Question 14

Why might you choose `useReducer` over `useState`?

Accepted Answer

Correct Answer

Answer

Because `useState` is deprecated.

Answer

When the next state strongly depends on the previous state, or when the state logic is complex and involves multiple sub-values being updated in tandem based on specific actions.

Answer

When you need to store strings.

Answer

When you need to interact with the DOM.

Question 15

What is 'State Initialization' via a function in `useState`?

Accepted Answer

Correct Answer

Answer

Passing a Promise to `useState`.

Answer

Passing a function to `useState` (e.g., `useState(() => getInitialData())`) ensures that the potentially expensive logic to calculate the initial state only runs once during the first render, not on every subsequent render.

Answer

Defining state inside a Custom Hook.

Answer

Using `useEffect` to set state on mount.

Question 16

If you need a value to persist across renders, but changing it shouldn't trigger a re-render, what hook do you use?

Accepted Answer

Correct Answer

Answer

`useState`

Answer

`useRef`

Answer

`useMemo`

Answer

`useContext`

Question 17

What is the difference between a `useRef` and a global variable outside the component?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

A global variable is shared among ALL instances of that component on the screen. A `useRef` is strictly encapsulated to that specific, individual component instance.

Answer

Global variables are faster.

Answer

`useRef` can be used in Redux.

Question 18

What does the `useImperativeHandle` hook do?

Accepted Answer

Correct Answer

Answer

It makes functional components object-oriented.

Answer

It allows a child component (using `forwardRef`) to expose specific, custom functions (like `.focus()` or `.reset()`) to a parent component, rather than exposing the raw HTML DOM node.

Answer

It forces synchronous rendering.

Answer

It manages global state imperatively.

Question 19

If a `useEffect` sets state, and that state change causes the component to re-render, will the `useEffect` run again?

Accepted Answer

Correct Answer

Answer

Yes, resulting in an infinite loop.

Answer

Only if the state variable that was changed is listed in the `useEffect`'s dependency array.

Answer

No, effects only run once.

Answer

Yes, but React will limit it to 5 loops.

Question 20

How do you fetch data based on a changing prop (e.g., `userId`), ensuring you don't encounter race conditions?

Accepted Answer

Correct Answer

Answer

You can't do this with hooks.

Answer

Use `useEffect` with `userId` in the dependency array. Inside, declare an `ignore = false` flag. In the cleanup function, set `ignore = true`. Only update state if `!ignore`.

Answer

Use `useLayoutEffect`.

Answer

Use a global Redux thunk strictly.

Question 21

What is the primary difference between `useTransition` and `useDeferredValue`?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

`useTransition` is used to wrap the *state setting function* (the action). `useDeferredValue` is used to wrap a *prop or state value* (the data) that you receive from a parent, deferring its update in a child.

Answer

`useTransition` is for CSS, `useDeferredValue` is for JS.

Answer

One is asynchronous, one is synchronous.

Question 22

Why must Custom Hooks start with the word 'use' (e.g., `useAuth`)?

Accepted Answer

Correct Answer

Answer

It is a strict Javascript syntax requirement.

Answer

It is a convention that allows the React ESLint plugin to recognize it as a Hook, automatically enforcing the Rules of Hooks (like preventing conditional calls) inside your custom function.

Answer

It registers the hook with the Virtual DOM.

Answer

It allows the hook to return an array.

Question 23

What happens if you omit the dependency array in `useCallback` or `useMemo`?

Accepted Answer

Correct Answer

Answer

It caches the value forever.

Answer

It defeats the entire purpose of the hook. The function will be executed (or the reference recreated) on every single render, completely wasting the memoization effort.

Answer

It throws a fatal error.

Answer

It assumes an empty array `[]`.

Question 24

Can you use Hooks inside a Class Component?

Accepted Answer

Correct Answer

Answer

Yes, by wrapping them in a higher-order function.

Answer

No. Hooks are strictly designed for Functional Components. If you need hook functionality in a class, you must either convert it or wrap the class component inside a functional component that uses the hook and passes the data down via props.

Answer

Yes, but only in `componentDidMount`.

Answer

Only `useContext` is allowed.

Question 25

Congratulations on finishing the React Hooks section! Why did the React team introduce Hooks?

Accepted Answer

Correct Answer

Answer

To make React faster than Vue.

Answer

To solve the massive complexity of "Wrapper Hell" (HOCs/Render Props), to make sharing stateful logic easy, and to eliminate the confusing `this` binding required by Classes, making the API purely functional.

Answer

To force developers to use TypeScript.

Answer

To enable Server-Side Rendering.

Academy

ReactJS Interview Prep - React Hooks (Part 6)