ReactJS Interview Prep - React Hooks (Part 2)

Question 1

What is the second argument to the `useEffect` hook?

Accepted Answer

Correct Answer

Answer

A callback function to run on unmount.

Answer

An array of dependencies that dictates exactly when the effect should re-run.

Answer

A boolean to toggle strict mode.

Answer

An object containing initial state data.

Question 2

If you pass an EMPTY array `[]` as the second argument to `useEffect`, when does the effect run?

Accepted Answer

Correct Answer

Answer

It runs on every single render.

Answer

It runs exactly once, immediately after the component mounts for the first time, and never again.

Answer

It never runs.

Answer

It only runs when the component unmounts.

Question 3

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

Accepted Answer

Correct Answer

Answer

To manage the component's internal CSS styling.

Answer

To allow functional components to perform side effects (like data fetching, manual DOM manipulation, or setting up subscriptions) after the component renders.

Answer

To replace the `render` method entirely.

Answer

To define new state variables.

Question 4

When exactly does the code inside a `useEffect` callback execute?

Accepted Answer

Correct Answer

Answer

Before the component renders.

Answer

Simultaneously while the component is rendering.

Answer

After the component renders and the changes have been flushed to the browser's paint.

Answer

Only when the user clicks a button.

Question 5

If you OMIT the dependency array entirely (e.g., `useEffect(() => { ... })`), when does the effect run?

Accepted Answer

Correct Answer

Answer

It runs exactly once on mount.

Answer

It runs after every single render of the component.

Answer

It throws a syntax error.

Answer

It only runs when state changes, but ignores prop changes.

Question 6

How do you clean up side effects (like clearing a `setInterval` or removing an event listener) using `useEffect`?

Accepted Answer

Correct Answer

Answer

By calling `React.cleanup()`.

Answer

By defining a separate `useCleanup()` hook.

Answer

By returning a cleanup function from within the `useEffect` callback.

Answer

You don't need to; React garbage collects them automatically.

Question 7

What happens if you return a Promise from `useEffect`? (e.g., `useEffect(async () => { ... })`)

Accepted Answer

Correct Answer

Answer

It allows you to use `await` cleanly.

Answer

React will throw an error or warning. The callback function in `useEffect` must return either nothing (`undefined`) or a cleanup function. An `async` function implicitly returns a Promise, which breaks this rule.

Answer

React automatically awaits the Promise before rendering.

Answer

It creates an Error Boundary.

Question 8

What is the proper way to fetch data inside a `useEffect`?

Accepted Answer

Correct Answer

Answer

`useEffect(async () => { const data = await fetch(url); })`

Answer

`useEffect(() => { async function fetchData() { const data = await fetch(url); } fetchData(); }, [])`

Answer

`const data = await useEffect(() => fetch(url))`

Answer

`useEffect(() => fetch(url).resolve())`

Question 9

Why do linters demand you put all variables (props, state, functions) used inside a `useEffect` into its dependency array?

Accepted Answer

Correct Answer

Answer

To make the code run faster.

Answer

To prevent 'Stale Closures'. If the effect relies on a `userId` prop, but `userId` isn't in the dependency array, the effect will run once and forever capture the original `userId`, ignoring future changes.

Answer

To prevent infinite loops.

Answer

To satisfy TypeScript type definitions.

Question 10

If you define a helper function outside of the `useEffect` but inside the component, and use it inside the `useEffect`, what does the linter require?

Accepted Answer

Correct Answer

Answer

You must move the function outside the component entirely.

Answer

You must include the function in the dependency array. Because the function is recreated on every render, this will trigger the effect infinitely unless you wrap the function in `useCallback`.

Answer

The linter ignores functions.

Answer

You must pass the function as a prop.

Question 11

What is a 'Race Condition' in the context of React data fetching?

Accepted Answer

Correct Answer

Answer

When the network is too slow to load React.

Answer

When you search for 'A', then 'AB'. The 'AB' request finishes first, but the 'A' request finishes second and overwrites the state, leaving the UI displaying data for 'A' even though the input says 'AB'.

Answer

When two components try to render at the same exact millisecond.

Answer

When CSS loads before the JavaScript.

Question 12

How do you solve a Race Condition when fetching data inside a `useEffect`?

Accepted Answer

Correct Answer

Answer

Use `setTimeout` to delay the requests.

Answer

Declare a local boolean `let ignore = false;` inside the effect. In the cleanup function, set `ignore = true`. After the `await fetch`, check `if (!ignore) setState(data)`.

Answer

Change the component to a Class component.

Answer

It cannot be solved without Redux.

Question 13

In React 18 Strict Mode during development, why does `useEffect` with an empty array `[]` run twice (Mount -> Unmount -> Mount)?

Accepted Answer

Correct Answer

Answer

It is a bug in the React 18 engine.

Answer

To intentionally stress-test your code. It ensures that your cleanup functions (like aborting fetches or clearing timers) work perfectly, preparing your app for modern features like Fast Refresh and off-screen rendering.

Answer

To double the network speed.

Answer

To pre-cache API responses.

Question 14

What is the modern React team's stance on using `useEffect` for data fetching?

Accepted Answer

Correct Answer

Answer

It is the officially recommended approach for all apps.

Answer

It is highly discouraged. You should use a dedicated data fetching library (like React Query, SWR, or React Router loaders) or a framework (like Next.js) which handles race conditions, caching, and deduplication for you.

Answer

It should only be used if accompanied by Redux.

Answer

It is only recommended for GraphQL.

Question 15

If a `useEffect` subscribes to a WebSocket connection, what MUST the cleanup function do?

Accepted Answer

Correct Answer

Answer

Send a final message to the server.

Answer

Close the WebSocket connection (e.g., `socket.close()`) to prevent massive memory leaks and duplicated connections when the component re-renders or unmounts.

Answer

Save the chat history to local storage.

Answer

Nothing, WebSockets auto-close.

Question 16

Why is it an anti-pattern to use `useEffect` to derive state from props (e.g., receiving a `firstName` prop and using `useEffect` to set a `fullName` state)?

Accepted Answer

Correct Answer

Answer

Because `useEffect` cannot read props.

Answer

It causes an unnecessary second render. You should simply calculate `const fullName = firstName + ' ' + lastName;` directly in the component body during the render phase.

Answer

It violates the rules of hooks.

Answer

Derived state can only be handled by Redux.

Question 17

If you use an object literal in a dependency array `[{ id: 1 }]`, what happens?

Accepted Answer

Correct Answer

Answer

React deeply compares the object keys.

Answer

The effect will run infinitely on every render, because `{ id: 1 } !== { id: 1 }` in JavaScript memory references.

Answer

React extracts the ID and compares that.

Answer

React throws an error.

Question 18

What is an `AbortController` commonly used for in combination with `useEffect`?

Accepted Answer

Correct Answer

Answer

To abort the rendering of the UI if an error occurs.

Answer

To cancel an ongoing `fetch` network request in the cleanup function if the user navigates away before the request finishes, saving bandwidth and preventing state updates on unmounted components.

Answer

To intercept Redux actions.

Answer

To pause CSS animations.

Question 19

Is it safe to omit `setCount` (the setter function from `useState`) from the `useEffect` dependency array?

Accepted Answer

Correct Answer

Answer

No, it violates the exhaustive-deps rule.

Answer

Yes. React explicitly guarantees that the `dispatch` functions returned by `useState` and `useReducer` are stable and will never change reference across renders.

Answer

Only if you wrap it in `useCallback`.

Answer

Yes, but it throws a warning.

Question 20

What is the purpose of `useLayoutEffect` compared to `useEffect`?

Accepted Answer

Correct Answer

Answer

There is no difference, one is just an alias.

Answer

`useEffect` is asynchronous and runs *after* the browser paints. `useLayoutEffect` is synchronous and runs *before* the browser paints, allowing you to read DOM layouts and mutate them without a visual flicker.

Answer

`useLayoutEffect` only works on CSS grid elements.

Answer

`useLayoutEffect` is exclusively for Server Side Rendering.

Question 21

Why should you avoid using `useLayoutEffect` unless absolutely necessary?

Accepted Answer

Correct Answer

Answer

It is deprecated.

Answer

Because it is synchronous, it blocks the browser from painting the UI. If you do expensive work inside it, the user will experience a frozen screen.

Answer

It cannot access React state.

Answer

It throws warnings in strict mode.

Question 22

Can you use `useLayoutEffect` in a Server-Side Rendering (SSR) environment?

Accepted Answer

Correct Answer

Answer

Yes, it works identically.

Answer

No, because there is no DOM layout to measure on a server. React will throw a warning. You must either fallback to `useEffect` or ensure the component only renders on the client.

Answer

Yes, but it delays the server response.

Answer

Only in Next.js App Router.

Question 23

How do you trigger an effect to run only when a specific prop changes, but NOT on the initial mount?

Accepted Answer

Correct Answer

Answer

React handles this automatically.

Answer

You must use a `useRef` to track if it is the first render. Inside the effect, check if the ref is true (set it to false and return early), otherwise run the logic.

Answer

Pass a third argument to `useEffect`.

Answer

Use `useLayoutEffect` instead.

Question 24

What happens if a child component has a `useEffect` and the parent component has a `useEffect`. Which runs first?

Accepted Answer

Correct Answer

Answer

The parent's effect runs first.

Answer

The child's effect runs first.

Answer

They run at the exact same millisecond.

Answer

It depends on alphabetical order.

Question 25

If a `useEffect` updates a state variable, causing a re-render, will the `useEffect` run again on that subsequent re-render?

Accepted Answer

Correct Answer

Answer

Yes, always.

Answer

Only if the updated state variable is listed in the dependency array.

Answer

No, effects only run once per session.

Answer

Only if the state changed from a string to a number.

Academy

ReactJS Interview Prep - React Hooks (Part 2)