ReactJS Interview Prep - React Hooks (Part 4)

Question 1

What is the `useReducer` hook?

Accepted Answer

Correct Answer

Answer

A hook strictly for interacting with the Redux library.

Answer

An alternative to `useState` built into React. It is preferable for complex state logic that involves multiple sub-values, or when the next state depends heavily on the previous state.

Answer

A hook for reducing the size of large arrays.

Answer

A hook that automatically memoizes components.

Question 2

What does a 'reducer' function (passed to `useReducer`) accept as its arguments?

Accepted Answer

Correct Answer

Answer

`(props, state)`

Answer

`(state, action)`

Answer

`(action, payload)`

Answer

`(previousState, nextState)`

Question 3

How do you trigger a state update when using `useReducer`?

Accepted Answer

Correct Answer

Answer

By calling `setState()`.

Answer

By calling the `dispatch` function returned by the hook, passing it an action object.

Answer

By directly mutating the state object.

Answer

By calling `useReducer.update()`.

Question 4

Is the `dispatch` function returned by `useReducer` stable?

Accepted Answer

Correct Answer

Answer

No, it changes on every render.

Answer

Yes, React guarantees that the `dispatch` function identity is stable and won't change on re-renders, making it safe to omit from `useEffect` dependency arrays or pass down to deeply nested children.

Answer

Only if you wrap it in `useCallback`.

Answer

It depends on the complexity of the reducer.

Question 5

What is the `useTransition` hook introduced in React 18?

Accepted Answer

Correct Answer

Answer

A hook for creating CSS transitions.

Answer

A hook that lets you mark certain state updates as 'non-urgent' (transitions). React can interrupt these updates to prioritize urgent updates (like typing in an input) to keep the UI responsive.

Answer

A hook for animating component mounts and unmounts.

Answer

A hook that transitions between React Router pages.

Question 6

What does `useTransition` return?

Accepted Answer

Correct Answer

Answer

A single function: `startTransition`.

Answer

An array with a boolean flag and a function: `[isPending, startTransition]`.

Answer

A Promise.

Answer

A transition duration integer.

Question 7

How does `useDeferredValue` differ from `useTransition`?

Accepted Answer

Correct Answer

Answer

They are identical aliases.

Answer

`useTransition` wraps the state *updater function*. `useDeferredValue` wraps the *value itself*. It allows you to defer updating a UI block until urgent renders have finished, useful when the state update happens higher up in the tree.

Answer

`useDeferredValue` is for promises, `useTransition` is for state.

Answer

`useDeferredValue` creates a timeout delay.

Question 8

What is 'Concurrent React'?

Accepted Answer

Correct Answer

Answer

React running on multiple CPU threads simultaneously.

Answer

A new behind-the-scenes rendering mechanism in React 18 that allows React to interrupt, pause, and resume rendering work to prioritize urgent user interactions over heavy background updates.

Answer

A library for managing WebSockets.

Answer

Server-side rendering.

Question 9

What happens if a custom hook does not start with the word 'use'?

Accepted Answer

Correct Answer

Answer

It will still work perfectly, but the React ESLint plugin will not be able to check it for violations of the Rules of Hooks (like conditional hook calls).

Answer

React will throw a fatal syntax error.

Answer

The custom hook will not be able to hold state.

Answer

It will execute asynchronously.

Question 10

Why is it generally recommended to write custom hooks for complex logic rather than leaving the logic in the component?

Accepted Answer

Correct Answer

Answer

It makes the component run faster.

Answer

It abstracts away implementation details, keeping the component body clean and declarative, while making the logic highly reusable across multiple different components.

Answer

It bypasses the Virtual DOM.

Answer

It is required by TypeScript.

Question 11

Which of the following is a completely valid Custom Hook?

Accepted Answer

Correct Answer

Answer

`function useData() { return 5; }` (A function that uses no React hooks internally).

Answer

`function useData() { const [data] = useState(5); return data; }`

Answer

`const useData = () => { useEffect(() => {}); }`

Answer

All of the above.

Question 12

What does it mean to "derive state" during render?

Accepted Answer

Correct Answer

Answer

Using a `useEffect` to copy a prop into a state variable.

Answer

Calculating a value directly from existing state or props inside the main body of the component, rather than storing the calculated value in its own `useState` variable.

Answer

Fetching data from an API.

Answer

Using `useReducer` instead of `useState`.

Question 13

What is the `useSyncExternalStore` hook used for?

Accepted Answer

Correct Answer

Answer

Synchronizing state across multiple browser tabs.

Answer

It allows React to safely read and subscribe to external data sources (like Redux, Zustand, or native browser APIs like `navigator.onLine`) in a way that is compatible with Concurrent React, preventing "tearing".

Answer

Saving data to an external SQL database.

Answer

Synchronizing local state with a REST API.

Question 14

If you need to fetch data from a REST API when a component mounts, which hook pattern is best if you aren't using a library like React Query?

Accepted Answer

Correct Answer

Answer

`useState` combined with a `useEffect` containing an empty dependency array `[]`.

Answer

`useReducer`.

Answer

`useLayoutEffect`.

Answer

`useContext`.

Question 15

Can a custom hook return JSX?

Accepted Answer

Correct Answer

Answer

Yes, but it is considered an anti-pattern. If a function returns JSX, it is conceptually a Component, not a Hook. Hooks should return data or functions.

Answer

No, returning JSX causes a crash.

Answer

Yes, it is highly recommended.

Answer

Only if it is wrapped in `React.memo`.

Question 16

What is the consequence of calling a hook conditionally? (e.g., `if (isLoggedIn) { const [user] = useState(); }`)

Accepted Answer

Correct Answer

Answer

It saves memory if the user is not logged in.

Answer

It breaks the Rules of Hooks. React maps state to hooks based on their call order. If a hook is skipped, all subsequent hooks will map to the wrong state variables, causing massive bugs.

Answer

It throws a warning but works fine.

Answer

It forces the component to unmount.

Question 17

How do you correctly handle conditional logic that requires a hook?

Accepted Answer

Correct Answer

Answer

Wrap the hook in a `try/catch`.

Answer

Call the hook unconditionally at the top level, and put the conditional logic *inside* the hook (e.g., inside the `useEffect` callback, or conditionally using the returned state).

Answer

Use a global variable.

Answer

Use a Class component instead.

Question 18

What is the `useDebugValue` hook?

Accepted Answer

Correct Answer

Answer

It prints console logs automatically.

Answer

It allows you to display custom, human-readable labels for your Custom Hooks inside the React DevTools extension.

Answer

It enables a debugger breakpoint in the browser.

Answer

It exposes the component's state to global `window`.

Question 19

What is 'Tearing' in UI rendering (which Concurrent React solves)?

Accepted Answer

Correct Answer

Answer

When CSS grid fails to align items.

Answer

A visual inconsistency where a single UI render cycle is interrupted, and part of the screen is drawn using old state, while the rest of the screen is drawn using new state.

Answer

When an image loads top-to-bottom slowly.

Answer

When a user clicks twice rapidly.

Question 20

If a hook relies on a primitive prop (like a string) passed from a parent, should that prop be in the `useEffect` dependency array?

Accepted Answer

Correct Answer

Answer

No, props never change.

Answer

Yes, all reactive values (props, state, and variables derived from them) used inside the effect must be in the dependency array.

Answer

Only if the prop is an object.

Answer

No, it will cause an infinite loop.

Question 21

Can you use `useState` inside a `useEffect` cleanup function?

Accepted Answer

Correct Answer

Answer

Yes, it is the recommended way to reset state.

Answer

No, calling state setters inside a cleanup function of an unmounting component will result in a React memory leak warning ("Can't perform a React state update on an unmounted component").

Answer

Only if the state is a boolean.

Answer

Yes, but it delays the unmount.

Question 22

What does it mean that React Hooks are 'composable'?

Accepted Answer

Correct Answer

Answer

They can be converted to WebAssembly.

Answer

Because they are just JavaScript functions, you can call built-in hooks from within custom hooks, combining multiple simple hooks into highly complex, reusable behaviors.

Answer

They can be used in Angular and Vue.

Answer

They replace the need for CSS.

Question 23

If you have a form with 10 inputs, should you use 10 separate `useState` hooks, or one `useState` hook with an object?

Accepted Answer

Correct Answer

Answer

10 separate `useState` hooks is required by React.

Answer

One `useState` with an object is required.

Answer

Both are completely valid. However, grouping them in one object (or using `useReducer`) is often cleaner for large forms, while separate variables are better for independent, unrelated state.

Answer

Neither, you must use Redux.

Question 24

Why is it important to keep the dependency array of a `useEffect` as small as possible?

Accepted Answer

Correct Answer

Answer

Large arrays take too much memory.

Answer

Every dependency is a trigger. If you include unnecessary objects or functions, the effect will run too often, causing performance issues or infinite loops.

Answer

React limits the array to 5 items.

Answer

It breaks the linter if it's too long.

Question 25

What is the primary benefit of the React Hooks architecture over the old Class Component architecture?

Accepted Answer

Correct Answer

Answer

Hooks execute 10x faster in the browser.

Answer

Hooks allow you to extract and share stateful logic between components easily, without the 'Wrapper Hell' of Higher Order Components or the confusing binding of the `this` keyword.

Answer

Hooks automatically type-check props without TypeScript.

Answer

Hooks natively support Server-Side Rendering without configuration.

Academy

ReactJS Interview Prep - React Hooks (Part 4)