ReactJS Interview Prep - React Hooks (Part 1)

Question 1

What does the `useState` hook return?

Accepted Answer

Correct Answer

Answer

A boolean indicating if the state changed.

Answer

An array with exactly two elements: the current state value, and a function that lets you update it.

Answer

An object containing the state data.

Answer

A Promise that resolves when the state updates.

Question 2

What fundamentally are React Hooks?

Accepted Answer

Correct Answer

Answer

A complete replacement for the Virtual DOM algorithm.

Answer

Special JavaScript functions that let you "hook into" React state and lifecycle features from inside functional components, eliminating the need for Class components.

Answer

A third-party state management library similar to Redux.

Answer

New HTML tags introduced in React 16.8.

Question 3

Which of the following is an absolute strict "Rule of Hooks"?

Accepted Answer

Correct Answer

Answer

Hooks must be called inside a `try/catch` block.

Answer

Hooks can only be called at the top level of your component or custom hook. Don’t call Hooks inside loops, conditions, or nested functions.

Answer

Hooks must be declared in an external file.

Answer

Hooks must always return an array.

Question 4

Where is the ONLY place you are allowed to call a React Hook?

Accepted Answer

Correct Answer

Answer

Inside standard JavaScript utility functions.

Answer

Inside React function components and inside custom Hooks.

Answer

Inside Class component lifecycle methods.

Answer

Inside Redux reducers.

Question 5

How do you initialize state using `useState` based on an expensive calculation, ensuring the calculation only runs once on the initial render?

Accepted Answer

Correct Answer

Answer

`useState(expensiveFunction())`

Answer

`useState(() => expensiveFunction())`

Answer

`useState(useMemo(expensiveFunction))`

Answer

`useState.initial(expensiveFunction)`

Question 6

If you call a state updater function (e.g., `setCount(count + 1)`), when does the new state become available in your code?

Accepted Answer

Correct Answer

Answer

Immediately on the very next line of code.

Answer

On the next render cycle. State updates in React are asynchronous.

Answer

After 100 milliseconds.

Answer

When the user clicks the screen.

Question 7

Why is it dangerous to update state based on the current state using the exact value (e.g., `setCount(count + 1)`) if called multiple times rapidly or asynchronously?

Accepted Answer

Correct Answer

Answer

It causes a syntax error.

Answer

Because of closures and asynchronous batching, `count` might hold a stale value, causing updates to be lost or overwritten.

Answer

It forces the browser to freeze.

Answer

React will block the update entirely.

Question 8

What is the correct way to update state if the new state depends on the previous state?

Accepted Answer

Correct Answer

Answer

Use a `setTimeout` to wait for the state to settle.

Answer

Pass an updater function to the setter instead of a direct value (e.g., `setCount(prevCount => prevCount + 1)`).

Answer

Use a global variable to track the changes.

Answer

Mutate the state directly: `count++`.

Question 9

What happens if you update a state variable to the exact same value it already holds? (e.g., `const [age, setAge] = useState(20); setAge(20);`)

Accepted Answer

Correct Answer

Answer

React crashes.

Answer

React bails out without rendering the children or firing effects (using Object.is comparison).

Answer

React re-renders the entire component tree anyway.

Answer

React throws a console warning.

Question 10

If you have a state object `const [user, setUser] = useState({ name: 'John', age: 30 })`, how should you update the age to 31?

Accepted Answer

Correct Answer

Answer

`user.age = 31; setUser(user);`

Answer

`setUser({ age: 31 });`

Answer

`setUser({ ...user, age: 31 });`

Answer

`setUser.age(31);`

Question 11

What is the consequence of mutating a state object directly (e.g., `user.name = 'Jane'; setUser(user)`)?

Accepted Answer

Correct Answer

Answer

It updates faster.

Answer

React compares the new `user` reference with the old `user` reference. Since they point to the same object in memory, React assumes nothing changed and will NOT re-render the component.

Answer

React will permanently lock the state.

Answer

It creates a new Context.

Question 12

How do you define a custom hook?

Accepted Answer

Correct Answer

Answer

By extending the `React.Hook` class.

Answer

By writing a standard JavaScript function whose name starts with 'use' (e.g., `useWindowSize`) and which calls other hooks internally.

Answer

By importing `createHook` from React.

Answer

Custom hooks are not supported in React.

Question 13

Do two components using the exact same custom hook share the same state?

Accepted Answer

Correct Answer

Answer

Yes, custom hooks act as global state managers.

Answer

No. Every time you use a custom hook, all state and effects inside of it are completely isolated to the component calling it.

Answer

Yes, but only if they are siblings.

Answer

Yes, if they pass the same arguments.

Question 14

What does the `useId` hook do (introduced in React 18)?

Accepted Answer

Correct Answer

Answer

It fetches the current user's database ID.

Answer

It generates unique, stable IDs that are consistent across server and client rendering, perfectly suited for connecting HTML `<label htmlFor="...">` to inputs.

Answer

It generates cryptographically secure UUIDs.

Answer

It automatically tracks the component's position in the DOM.

Question 15

Should you use `useId` to generate keys for mapped arrays in JSX?

Accepted Answer

Correct Answer

Answer

Yes, it is the officially recommended way.

Answer

No. `useId` is for HTML attributes like aria-describedby or htmlFor. Keys should be generated from your actual data.

Answer

Yes, but only for Server-Side Rendering.

Answer

No, `useId` returns numbers, keys need to be strings.

Question 16

What happens if a functional component has NO hooks inside it?

Accepted Answer

Correct Answer

Answer

It throws a compilation error.

Answer

It behaves as a perfectly valid, pure presentational component that solely renders UI based on props.

Answer

It will never re-render.

Answer

It cannot receive props.

Question 17

Why do linters strictly enforce the 'eslint-plugin-react-hooks' rules?

Accepted Answer

Correct Answer

Answer

To enforce CSS naming conventions.

Answer

To ensure hooks are not called conditionally and to verify that all dependencies are correctly listed in `useEffect`/`useCallback` dependency arrays, preventing massive bugs.

Answer

To limit the number of hooks per file.

Answer

To force the use of TypeScript.

Question 18

If a custom hook returns an array `[value, setValue]`, how can you rename them in the consuming component?

Accepted Answer

Correct Answer

Answer

`const [myVal, setMyVal] = useCustomHook();`

Answer

`const { value: myVal, setValue: setMyVal } = useCustomHook();`

Answer

`const myVal = useCustomHook().value;`

Answer

You cannot rename them.

Question 19

If a custom hook returns an object `{ data, isLoading, error }`, how can you rename `data` in the consuming component?

Accepted Answer

Correct Answer

Answer

`const { data as myData } = useFetch();`

Answer

`const [myData] = useFetch();`

Answer

`const myData = useFetch(data);`

Answer

Objects cannot be destructured.

Question 20

What is 'Stale State' (or Stale Closure) in the context of React Hooks?

Accepted Answer

Correct Answer

Answer

When state data is stored in LocalStorage too long.

Answer

When a function (like a `useEffect` callback or an event handler) captures a state variable from a specific render, and continues to use that old value even after the state has been updated in subsequent renders.

Answer

When Redux fails to sync with React.

Answer

When the browser caches an old version of the component.

Question 21

How do you fix a Stale State closure when updating state inside a `setInterval`?

Accepted Answer

Correct Answer

Answer

You cannot use `setInterval` in React.

Answer

Use the functional updater form of `useState` (e.g., `setCount(c => c + 1)`), which ensures React passes the most recent state to the callback, regardless of what the closure captured.

Answer

Use `React.memo`.

Answer

Force a synchronous re-render.

Question 22

Can you use Hooks in Server-Side Rendering (SSR) environments like Next.js?

Accepted Answer

Correct Answer

Answer

No, hooks only work in the browser.

Answer

Yes, but ONLY in Client Components. Hooks cannot be used in React Server Components because Server Components do not have state or interactivity.

Answer

Yes, they work perfectly on the server.

Answer

Only `useEffect` works on the server.

Question 23

Which of the following describes 'State Colocation'?

Accepted Answer

Correct Answer

Answer

Moving all state to a global Redux store.

Answer

Moving state as close as possible to where it is actually used in the component tree, rather than hoarding it all at the top level of the app.

Answer

Combining multiple `useState` calls into one `useReducer`.

Answer

Storing state inside CSS Custom Properties.

Question 24

In React 18, are state updates batched inside native browser events (like `setTimeout` or `fetch` callbacks)?

Accepted Answer

Correct Answer

Answer

No, they are never batched.

Answer

Yes, React 18 introduced Automatic Batching. State updates inside promises, timeouts, and native event handlers are now batched into a single render.

Answer

Only if you manually wrap them in `ReactDOM.unstable_batchedUpdates`.

Answer

Only inside Class components.

Question 25

How do you explicitly force React 18 NOT to batch state updates (for example, if you need the DOM to update immediately before running the next line of code)?

Accepted Answer

Correct Answer

Answer

By using `flushSync(() => { ... })`.

Answer

By setting `batching={false}`.

Answer

By using a `useRef` instead of `useState`.

Answer

It is impossible to disable Automatic Batching.

Academy

ReactJS Interview Prep - React Hooks (Part 1)