ReactJS Interview Prep - React Hooks (Part 5)

Question 1

What is the purpose of the `useMemo` hook?

Accepted Answer

Correct Answer

Answer

To memorize the user's login session.

Answer

To cache (memoize) the result of an expensive calculation between renders, so the calculation is only re-run when its specific dependencies change, rather than on every single render.

Answer

To save React elements to LocalStorage.

Answer

To prevent a component from re-rendering.

Question 2

What does `useMemo` return?

Accepted Answer

Correct Answer

Answer

A function that you must call to get the value.

Answer

The memoized (cached) value returned by the function you passed to it.

Answer

A boolean indicating if the cache was hit.

Answer

A React Component.

Question 3

What is the purpose of the `useCallback` hook?

Accepted Answer

Correct Answer

Answer

To cache a value returned by an API.

Answer

To cache (memoize) a function reference between renders. It returns the exact same function instance as long as its dependencies haven't changed.

Answer

To handle asynchronous callbacks safely.

Answer

To force a component to re-render.

Question 4

How do `useMemo` and `useCallback` differ?

Accepted Answer

Correct Answer

Answer

They are completely different concepts.

Answer

`useMemo` calls the function you provide and caches the returned *value*. `useCallback` caches the *function itself*, without calling it.

Answer

`useMemo` is for state, `useCallback` is for props.

Answer

`useCallback` runs asynchronously.

Question 5

Why shouldn't you wrap every single function and variable in your component with `useCallback` and `useMemo`?

Accepted Answer

Correct Answer

Answer

Because it will crash the linter.

Answer

Because memoization itself has a performance cost (memory overhead and the cost of checking the dependency array on every render). Overusing it for trivial calculations actually makes your app slower.

Answer

Because it disables Concurrent Mode.

Answer

Because it causes stale closures.

Question 6

If a child component is NOT wrapped in `React.memo`, does passing it a `useCallback`-wrapped function provide any performance benefit?

Accepted Answer

Correct Answer

Answer

Yes, massive benefits.

Answer

No. If the child isn't memoized, it will re-render anyway whenever the parent re-renders, making the stable function reference from `useCallback` completely useless and purely wasteful.

Answer

Yes, it optimizes the Virtual DOM.

Answer

Only if the child uses `useState`.

Question 7

Can you use hooks inside a `try/catch` block?

Accepted Answer

Correct Answer

Answer

Yes, absolutely.

Answer

No. Hooks must be called at the top level. Calling a hook inside a `try/catch` block or an `if/else` block violates the Rules of Hooks because it can change the call order.

Answer

Only `useEffect` can be inside a `try`.

Answer

Yes, as long as it's not asynchronous.

Question 8

What is the `useContext` hook used for?

Accepted Answer

Correct Answer

Answer

To manage global CSS styles.

Answer

To cleanly read and subscribe to a value from a React Context (created by `React.createContext`) without needing messy wrapper components like `<Context.Consumer>`.

Answer

To fetch the current URL context.

Answer

To bind the `this` keyword.

Question 9

If you use `const theme = useContext(ThemeContext)`, and the `ThemeContext.Provider`'s value changes, what happens to your component?

Accepted Answer

Correct Answer

Answer

Nothing, unless the component's props change.

Answer

The component is guaranteed to re-render with the new context value, bypassing any `React.memo` or `shouldComponentUpdate` optimizations that might exist between it and the Provider.

Answer

The component throws a warning.

Answer

The component must manually refresh to see the change.

Question 10

How can you optimize a component that uses `useContext` if the context updates frequently, but the component only needs a small part of that context?

Accepted Answer

Correct Answer

Answer

Use `useMemo` on the `useContext` call.

Answer

Split the massive context into multiple smaller, focused contexts (e.g., `UserContext`, `ThemeContext`). Alternatively, use a state management library (like Redux or Zustand) that supports atomic selector subscriptions.

Answer

Wrap the component in `React.memo`.

Answer

It cannot be optimized.

Question 11

What is a 'Custom Hook' fundamentally?

Accepted Answer

Correct Answer

Answer

A new API provided by the React team.

Answer

Just a regular JavaScript function whose name starts with 'use' and that calls other hooks inside of it, used to extract and share stateful logic.

Answer

A Class component that mimics functional behavior.

Answer

A WebAssembly module.

Question 12

If a custom hook contains a `useEffect`, and two different components use that custom hook, how many times does the `useEffect` run?

Accepted Answer

Correct Answer

Answer

Once globally.

Answer

Once for each component. The state and effects inside a custom hook are completely isolated to the specific component instance calling it.

Answer

It depends if they are on the same page.

Answer

It only runs for the first component that mounts.

Question 13

What happens if you return an object from a custom hook instead of an array?

Accepted Answer

Correct Answer

Answer

It is illegal.

Answer

It is perfectly fine. While `useState` returns an array to allow easy renaming (`const [a, setA]`), returning an object from a custom hook is common and allows the consumer to only destructure the specific properties they need (`const { data } = useFetch()`).

Answer

It breaks the linter.

Answer

It converts the hook into a Component.

Question 14

Why is it important to use the `useId` hook instead of `Math.random()` for generating HTML element IDs (like tying a `` to an ``)?

Accepted Answer

Correct Answer

Answer

Because `Math.random` is too slow.

Answer

Because in Server-Side Rendering (SSR), `Math.random` generates a different number on the server than it does on the client, causing a hydration mismatch error. `useId` guarantees the ID is stable across both environments.

Answer

Because `useId` generates secure UUIDs.

Answer

Because `Math.random` can return duplicates.

Question 15

Can `useId` be used as a `key` in a mapped list?

Accepted Answer

Correct Answer

Answer

Yes, it is the recommended approach.

Answer

No. Keys should be generated from your data (like a database ID). `useId` is not tied to your data, so if your list reorders, the IDs will map incorrectly, destroying list rendering performance.

Answer

Yes, but only for static lists.

Answer

No, because it returns an object.

Question 16

What is the difference between `useEffect` and React's lifecycle methods (`componentDidMount`, `componentDidUpdate`)?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

Lifecycle methods are tied to the *component's* timeline. `useEffect` is tied to the *data's* timeline (synchronizing the side effect with specific state/props changes).

Answer

Lifecycle methods are asynchronous.

Answer

`useEffect` only runs once.

Question 17

What happens if a `useEffect` dependency is an object literal defined inside the component body?

Accepted Answer

Correct Answer

Answer

It works perfectly.

Answer

The object is recreated with a new memory address on every render. The dependency check (`prevObj === newObj`) will always fail, causing the effect to run on every single render infinitely.

Answer

React will deep-compare the object automatically.

Answer

The linter will delete the object.

Question 18

How do you conditionally execute an effect (e.g., only run it if a user is logged in)?

Accepted Answer

Correct Answer

Answer

Wrap the hook in an `if` statement.

Answer

Place the `if` statement *inside* the hook's callback function (e.g., `useEffect(() => { if (!isLoggedIn) return; ... }, [isLoggedIn])`).

Answer

Use a `useLayoutEffect`.

Answer

Pass a boolean as the third argument.

Question 19

Which of the following is true about the cleanup function returned by `useEffect`?

Accepted Answer

Correct Answer

Answer

It only runs when the component unmounts.

Answer

It runs right before the component unmounts, AND it runs right before the effect executes again on subsequent re-renders (to clean up the previous effect's garbage).

Answer

It runs asynchronously in a web worker.

Answer

It cannot access state variables.

Question 20

What does the `useInsertionEffect` hook do (React 18)?

Accepted Answer

Correct Answer

Answer

It inserts DOM nodes into the tree.

Answer

It is a highly specialized hook intended strictly for CSS-in-JS library authors to inject `<style>` tags into the DOM before any layout effects read the layout, preventing layout thrashing.

Answer

It replaces `componentWillMount`.

Answer

It fetches data.

Question 21

Why does React 18's Strict Mode run the `useEffect` sequence twice in development?

Accepted Answer

Correct Answer

Answer

To compile the code.

Answer

To simulate a component being mounted, unmounted (e.g., user navigates away rapidly), and remounted. It forcefully exposes bugs where developers forgot to write cleanup functions.

Answer

To test Server-Side Rendering.

Answer

Because of a known bug in Webpack.

Question 22

What is 'Render Props', and do we still need them with Hooks?

Accepted Answer

Correct Answer

Answer

They are required for Redux.

Answer

A pattern where a component accepts a function as a prop to determine what to render. While still useful for highly reusable UI containers, Hooks have largely replaced Render Props for sharing *logic*.

Answer

They are new HTML attributes.

Answer

They are the modern replacement for Context.

Question 23

What is the primary difference between `useState` and `useRef` when storing mutable data?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

`useState` schedules a re-render when the data changes. `useRef` mutates silently and does not trigger a re-render.

Answer

`useRef` only holds strings.

Answer

`useState` is asynchronous.

Question 24

Can a Custom Hook manage its own `useEffect` lifecycle independently of the component calling it?

Accepted Answer

Correct Answer

Answer

No, custom hooks cannot have lifecycles.

Answer

Yes, absolutely. The component calling the custom hook "inherits" all state and effect logic defined inside the hook, executing it seamlessly as part of its own lifecycle.

Answer

Only if the hook is asynchronous.

Answer

Only in React 18.

Question 25

Is it required to use object destructuring `{}` or array destructuring `[]` when receiving data from a hook?

Accepted Answer

Correct Answer

Answer

Yes, it causes a syntax error otherwise.

Answer

No, it is just a JavaScript convenience. You could write `const stateArray = useState(0); const count = stateArray[0];` but destructuring is vastly more readable.

Answer

It is required by TypeScript.

Answer

It is required by the Virtual DOM.

Academy

ReactJS Interview Prep - React Hooks (Part 5)