ReactJS Interview Prep - React Hooks

Question 1

What is the primary purpose of the `useState` hook in React?

Accepted Answer

Correct Answer

Answer

To directly access and manipulate DOM elements.

Answer

To declare and manage a state variable within a functional component.

Answer

To perform side effects such as data fetching or subscriptions.

Answer

To cache an expensive computed value between re-renders.

Question 2

What is the primary purpose of the `useEffect` hook in React?

Accepted Answer

Correct Answer

Answer

To perform side effects in functional components, such as data fetching or DOM manipulation.

Answer

To cache a function definition to prevent unnecessary re-renders.

Answer

To return a memoized value that only recalculates when dependencies change.

Answer

To declare local state variables that persist across renders.

Question 3

What problem does the `useMemo` hook primarily solve?

Accepted Answer

Correct Answer

Answer

It memoizes a function callback so that its reference remains stable.

Answer

It allows deeply nested components to access global context without prop drilling.

Answer

It memoizes the result of an expensive computation so it is not recalculated on every render.

Answer

It serves as an alternative to `useState` for managing complex object states.

Question 4

What is the specific use case for the `useCallback` hook?

Accepted Answer

Correct Answer

Answer

To force a component to trigger a re-render synchronously.

Answer

To memoize a function instance so its reference remains stable across renders.

Answer

To synchronously update the actual DOM before the browser paints.

Answer

To memoize a computed numeric or string value.

Question 5

Besides accessing DOM elements, what is a key capability of the `useRef` hook?

Accepted Answer

Correct Answer

Answer

It persists mutable values across renders without triggering a component re-render when the value changes.

Answer

It allows a component to subscribe to React Context updates.

Answer

It triggers a synchronous state update that blocks the main thread.

Answer

It automatically fires a cleanup function right before a component unmounts.

Question 6

What is a strict naming requirement when creating a Custom Hook in React?

Accepted Answer

Correct Answer

Answer

The function name must start with 'use' (e.g., `useFetch`).

Answer

The function can be named anything as long as it returns an array.

Answer

Custom hooks cannot call other built-in React hooks.

Answer

The function name must end with 'Hook' (e.g., `fetchDataHook`).

Question 7

What role does the dependency array play in a `useEffect` hook?

Accepted Answer

Correct Answer

Answer

It is a strictly required argument; omitting it throws a compilation error.

Answer

It is exclusively used to define CSS styles that the effect relies upon.

Answer

It must contain every single variable and function declared in the component.

Answer

It determines exactly when the effect should re-run based on whether the listed values have changed.

Question 8

When does the cleanup function returned by a `useEffect` callback execute?

Accepted Answer

Correct Answer

Answer

It runs right before the component unmounts, as well as right before the effect re-runs on subsequent renders.

Answer

It runs immediately after the component mounts for the first time.

Answer

Cleanup functions are not supported in functional components; they are a class-only feature.

Answer

It executes asynchronously after the browser has painted the screen.

Question 9

What is the primary role of the `useContext` hook?

Accepted Answer

Correct Answer

Answer

To create and initialize a brand new Context object.

Answer

To act as a Provider and pass a context value down the tree.

Answer

To consume a context value from the nearest matching Provider above it in the component tree.

Answer

To manage application routing and URL parameters.

Question 10

In what scenario would you choose `useReducer` over `useState`?

Accepted Answer

Correct Answer

Answer

When you want an exact functional alternative to `useEffect`.

Answer

When building modern apps, as `useState` is considered a deprecated legacy hook.

Answer

When you have complex state logic that involves multiple sub-values, or the next state depends on the previous state.

Answer

When you need to seamlessly integrate Redux middleware into a local component.

Question 11

Which of the following is a strict rule regarding where React Hooks can be called?

Accepted Answer

Correct Answer

Answer

Hooks can be called inside loops, conditions, and nested functions.

Answer

Hooks must only be called at the top level of a React function component or custom hook.

Answer

Hooks must be called inside traditional class component lifecycle methods.

Answer

Hooks can only be called from regular vanilla JavaScript functions outside of React.

Question 12

What is the primary difference between `useLayoutEffect` and `useEffect`?

Accepted Answer

Correct Answer

Answer

It runs asynchronously after the browser has painted the screen to avoid blocking the UI.

Answer

It is specifically optimized for fetching data from external APIs.

Answer

It fires synchronously after all DOM mutations but before the browser actually paints the screen.

Answer

It completely prevents the component from re-rendering under any circumstances.

Question 13

How do you achieve 'lazy initialization' with the `useState` hook?

Accepted Answer

Correct Answer

Answer

By passing a function to `useState` that computes and returns the initial state.

Answer

By using the `await` keyword directly inside the `useState` initialization call.

Answer

By passing a JavaScript Promise as the initial state argument.

Answer

By calling `useEffect` directly inside the `useState` call to fetch data.

Question 14

What is the primary purpose of the `useImperativeHandle` hook?

Accepted Answer

Correct Answer

Answer

It forces a functional component to render imperatively rather than declaratively.

Answer

It customizes the instance value or methods that are exposed to parent components when using `ref`.

Answer

It replaces the need for standard state management libraries like Redux.

Answer

It handles imperative routing navigation within single-page applications.

Question 15

What specific capability does the `useTransition` hook provide in React 18?

Accepted Answer

Correct Answer

Answer

It automatically generates CSS transition animations for DOM elements.

Answer

It lets you mark certain state updates as non-urgent 'transitions', keeping the UI responsive during heavy computations.

Answer

It handles smooth client-side routing and page transitions seamlessly.

Answer

It manages complex component lifecycles that require staged rendering phases.

Question 16

What is the primary purpose of the `useDeferredValue` hook?

Accepted Answer

Correct Answer

Answer

It defers the execution of a `useEffect` callback until the main thread is completely idle.

Answer

It accepts a value and returns a deferred version of it, allowing you to defer updating less critical parts of the UI.

Answer

It delays the initial mounting of a component by a specified timeout in milliseconds.

Answer

It creates a delayed JavaScript Promise that resolves after a specified timeout.

Question 17

What problem does the `useId` hook primarily solve?

Accepted Answer

Correct Answer

Answer

It generates unique, cryptographically secure IDs for backend database records.

Answer

It generates unique, stable IDs that match on both the server and client, preventing hydration mismatches.

Answer

It identifies exactly which specific child component triggered a parent's re-render.

Answer

It completely replaces the need to provide `key` props when mapping over arrays.

Question 18

What is the primary use case for the `useDebugValue` hook?

Accepted Answer

Correct Answer

Answer

It automatically logs all state and prop changes to the browser's console.

Answer

It acts as a breakpoint, intentionally pausing the execution of a component for debugging.

Answer

It allows you to display a custom label for your Custom Hooks inside the React DevTools extension.

Answer

It is a modern replacement for Error Boundaries in functional components.

Question 19

How do 'stale closures' typically occur when using the `useEffect` hook?

Accepted Answer

Correct Answer

Answer

When the effect's callback references a state variable, but that variable is omitted from the dependency array.

Answer

When the user's browser cache aggressively stores outdated JavaScript files.

Answer

When multiple `useEffect` hooks are utilized within the exact same component.

Answer

When state is updated synchronously rather than asynchronously.

Question 20

When using `useReducer`, what is typically passed into the `dispatch` function?

Accepted Answer

Correct Answer

Answer

An action object, conventionally containing a `type` property and an optional `payload`.

Answer

A new state object that completely replaces the old state.

Answer

A callback function that receives the previous state and computes the next state.

Answer

A primitive string directly representing the exact new state.

Question 21

How does a value stored in `useRef` differ from a standard local variable declared with `let` inside a component?

Accepted Answer

Correct Answer

Answer

`useRef` triggers a component re-render when mutated; local variables do not.

Answer

Values in `useRef` persist across re-renders; local variables are recreated and reset on every single render.

Answer

Local variables persist safely across re-renders; `useRef` values are reset upon re-rendering.

Answer

They are completely identical in behavior; `useRef` is just a strict-mode requirement.

Question 22

When a Context Provider's `value` prop changes, how does React handle the consuming components?

Accepted Answer

Correct Answer

Answer

Only the Provider component itself re-renders to save performance.

Answer

The application will throw an error unless every consuming component is wrapped in `React.memo`.

Answer

Every single component that calls `useContext` for that specific context will automatically re-render.

Answer

State is preserved statically and no re-renders occur downstream.

Question 23

Which of the following is true regarding the use of multiple `useEffect` hooks in a single component?

Accepted Answer

Correct Answer

Answer

React will only execute the very first `useEffect` declared and ignore the rest.

Answer

React automatically merges them into a single, unified effect behind the scenes.

Answer

It is highly recommended to use multiple effects to separate unrelated logic, and they execute in the order declared.

Answer

It is considered a severe anti-pattern that heavily degrades application performance.

Question 24

What is the core difference between `useCallback` and `useMemo`?

Accepted Answer

Correct Answer

Answer

`useCallback` is designed for class components; `useMemo` is designed for functional components.

Answer

`useCallback` memoizes the function definition itself, while `useMemo` executes the function and memoizes its returned result.

Answer

`useCallback` strictly returns a boolean flag; `useMemo` returns a complex object.

Answer

There is absolutely no functional difference; they are aliases for the same underlying React method.

Question 25

According to the Rules of Hooks, can you call a hook (like `useState`) inside an `if` statement?

Accepted Answer

Correct Answer

Answer

Yes, but only if it happens to be the very last hook called in the component.

Answer

No, Hooks must be called unconditionally in the exact same order on every single render.

Answer

Yes, but only if the condition evaluates based on a state variable.

Answer

No, Hooks inherently do not support any form of conditional logic within their arguments.

Academy

ReactJS Interview Prep - React Hooks