ReactJS Interview Prep - State Management (Part 5)

Question 1

In React Hook Form, what does the `register` function do?

Accepted Answer

Correct Answer

Answer

It registers the user in the database.

Answer

It connects a native HTML input to the hook form's internal state via a `ref`. E.g., `<input {...register('firstName')} />`.

Answer

It registers a Redux action.

Answer

It creates a CSS class.

Question 2

Why is managing Form State notoriously difficult in native React?

Accepted Answer

Correct Answer

Answer

Forms are not supported in React.

Answer

Because complex forms require tracking values, validation errors, touched states, pristine/dirty states, and submitting flags. Doing this manually with `useState` leads to massive boilerplate and poor performance due to re-renders on every keystroke.

Answer

Because React cannot read the `onSubmit` event.

Answer

Because forms require Server-Side Rendering.

Question 3

What is the primary architectural difference between React Hook Form and older libraries like Formik?

Accepted Answer

Correct Answer

Answer

Formik uses GraphQL.

Answer

Formik uses Controlled Components (storing form state in React state, causing re-renders on every keystroke). React Hook Form embraces Uncontrolled Components (using Refs), avoiding re-renders entirely until validation or submission occurs.

Answer

React Hook Form requires Redux.

Answer

There is no difference.

Question 4

How do you handle form validation (like checking if an email is valid) in React Hook Form?

Accepted Answer

Correct Answer

Answer

You must write manual `if/else` statements in the submit handler.

Answer

You can pass validation rules directly into the `register` function (e.g., `register('email', { required: true, pattern: /.../ })`), or use a schema validation library like Yup or Zod via a resolver.

Answer

It uses native HTML5 validation only.

Answer

It requires a server-side endpoint.

Question 5

What does it mean for a form field to be 'Dirty'?

Accepted Answer

Correct Answer

Answer

The field contains a profanity.

Answer

The user has modified the value of the field so it no longer matches its initial default value.

Answer

The field has an active validation error.

Answer

The field is currently focused.

Question 6

What does it mean for a form field to be 'Touched'?

Accepted Answer

Correct Answer

Answer

The user clicked on it.

Answer

The user focused the field and then blurred (clicked away) from it. This is typically the exact moment you want to show validation errors to avoid yelling at the user before they finish typing.

Answer

The user pressed the enter key.

Answer

The field was submitted to the server.

Question 7

Why should you avoid putting Form State (like user inputs) into Redux?

Accepted Answer

Correct Answer

Answer

Redux cannot store strings.

Answer

Dispatching an action on every single keystroke causes massive overhead, floods the Redux DevTools history, and forces unnecessary re-renders across the app. Form state is highly localized and transient.

Answer

It breaks the Redux Thunk middleware.

Answer

Redux only accepts boolean values.

Question 8

What is 'URL State'?

Accepted Answer

Correct Answer

Answer

The current IP address of the user.

Answer

Storing UI state (like active tabs, search queries, pagination, or sorting filters) directly in the browser's URL query string, rather than in React state.

Answer

A Redux middleware for routing.

Answer

Fetching data from a URL.

Question 9

How do you implement URL State in a standard React application?

Accepted Answer

Correct Answer

Answer

Using `useState` exclusively.

Answer

Using a routing library like React Router (`useSearchParams`) to read and update the query string, and driving the UI based on those parameters.

Answer

By modifying the DOM `window.location.href` which forces a page reload.

Answer

Using the Context API.

Question 10

What is the primary advantage of using a library like Zustand over the Context API for UI state (like Dark Mode)?

Accepted Answer

Correct Answer

Answer

Zustand works on the server.

Answer

Context requires a `<Provider>` which adds a layer to the DOM tree. More importantly, Zustand allows components to subscribe ONLY to the specific slice of state they need, preventing unnecessary re-renders.

Answer

Context API is deprecated.

Answer

Zustand provides built-in CSS transitions.

Question 11

If a React application uses Redux Toolkit, what does the `initialState` serve as?

Accepted Answer

Correct Answer

Answer

The state during server-side rendering.

Answer

The fallback structure and default values of the slice when the application first loads, before any actions have been dispatched.

Answer

The state that cannot be modified.

Answer

The database schema.

Question 12

What is a 'State Hydration' mismatch in Next.js/SSR?

Accepted Answer

Correct Answer

Answer

When the server runs out of memory.

Answer

When the HTML generated on the server (based on server state) does not match the HTML expected by the client on the first render, causing React to throw a warning and forcefully rebuild the DOM.

Answer

When CSS files fail to load.

Answer

When Redux actions are dispatched too quickly.

Question 13

How do you solve a State Hydration mismatch caused by reading `localStorage` on initial render?

Accepted Answer

Correct Answer

Answer

You cannot use `localStorage` in React.

Answer

Ensure the initial render state matches the server (e.g., `null`). Then, inside a `useEffect` (which only runs on the client), read `localStorage` and update the state.

Answer

Pass `localStorage` to the server via an API.

Answer

Use Redux strictly.

Question 14

In Jotai or Recoil, what happens if an atom's value is never read by any component?

Accepted Answer

Correct Answer

Answer

It causes a memory leak.

Answer

Nothing. Atoms are lazy. If they are not subscribed to by a mounted component, they consume negligible memory and do not trigger any renders.

Answer

It throws a compiler warning.

Answer

It deletes itself automatically.

Question 15

If a component dispatches a Redux action, does the dispatch function return a value?

Accepted Answer

Correct Answer

Answer

No, it always returns undefined.

Answer

Normally it returns the action object that was dispatched. However, if a Middleware (like Redux Thunk) intercepts it, the middleware can return a Promise, allowing the component to `await dispatch(...)`.

Answer

It returns the new State tree.

Answer

It returns a boolean indicating success.

Question 16

What is the concept of 'Time-to-Interactive' (TTI) and how does state architecture affect it?

Accepted Answer

Correct Answer

Answer

How fast the user clicks.

Answer

TTI is how long it takes for a page to become fully usable. If your state architecture requires downloading a massive 500kb Redux store before rendering the first button, TTI is severely degraded.

Answer

It is a Redux DevTools metric.

Answer

It measures database query speed.

Question 17

What is 'Optimistic UI'?

Accepted Answer

Correct Answer

Answer

Designing with bright colors.

Answer

A state pattern where the UI is updated locally immediately upon user interaction, assuming the server request will succeed. If it fails, the state is rolled back.

Answer

Only showing positive notifications.

Answer

Ignoring errors in Redux.

Question 18

How does Zustand handle updating a deeply nested object in state?

Accepted Answer

Correct Answer

Answer

It uses Immer automatically.

Answer

Like Vanilla React, you must manually spread the nested objects: `set(state => ({ user: { ...state.user, profile: { ...state.user.profile, age: 30 } } }))`. Alternatively, you can explicitly add Immer middleware to Zustand.

Answer

It mutates it directly.

Answer

It uses a Reducer.

Question 19

What is a 'Store Enhancer' in Redux?

Accepted Answer

Correct Answer

Answer

A CSS class.

Answer

A higher-order function that completely wraps and alters the Redux store creator. Middleware is actually applied using the `applyMiddleware` store enhancer.

Answer

A tool that makes Redux faster.

Answer

A DevTools feature.

Question 20

Why do some teams use 'State Machines' (XState) for complex frontend logic instead of Redux?

Accepted Answer

Correct Answer

Answer

XState is built by Facebook.

Answer

Redux allows 'impossible states' (e.g., `isFetching: true` AND `data: [...]` AND `error: 'Failed'`). XState forces you to explicitly define states and strict transitions, mathematically proving impossible states cannot happen.

Answer

XState doesn't require Javascript.

Answer

XState is used for Server-Side Rendering.

Question 21

Is it an anti-pattern to use `useState` and Redux Toolkit in the exact same component?

Accepted Answer

Correct Answer

Answer

Yes, all state must be in Redux.

Answer

No, it is the recommended approach. Use Redux for global shared data (like user auth), and use `useState` for local transient UI state (like whether a specific dropdown is open).

Answer

Yes, it causes memory leaks.

Answer

It is only allowed in React 18.

Question 22

What does `queryClient.prefetchQuery` do in React Query?

Accepted Answer

Correct Answer

Answer

It deletes a query.

Answer

It fetches data and stores it in the cache *before* a component actually mounts and needs it (e.g., on a button hover), ensuring the data is instantly available when the user navigates to the next page.

Answer

It forces a synchronous fetch.

Answer

It prevents network errors.

Question 23

What happens if two components use `useQuery` with the exact same `queryKey`, but one passes `staleTime: 0` and the other passes `staleTime: Infinity`?

Accepted Answer

Correct Answer

Answer

The app crashes.

Answer

React Query merges the options based on the strictest requirement. It will usually respect the `staleTime: 0` and trigger a background refetch to ensure the component demanding fresh data is satisfied.

Answer

It creates two separate caches.

Answer

It ignores the `queryKey`.

Question 24

What is 'Persist State'?

Accepted Answer

Correct Answer

Answer

A feature that prevents the user from closing the tab.

Answer

Taking the current state tree (from Redux or Zustand) and serializing it into `localStorage` or `sessionStorage` so that the user's data survives a page refresh or browser close.

Answer

Saving data to a SQL database.

Answer

Preventing React from re-rendering.

Question 25

Which of the following is true regarding Redux and Context?

Accepted Answer

Correct Answer

Answer

Context replaces Redux.

Answer

Context is for dependency injection; Redux is for state management. While you can build a crude state manager using Context + `useReducer`, it lacks the performance optimizations, DevTools, and middleware of a true state library.

Answer

Redux uses LocalStorage under the hood.

Answer

Context cannot be used with React 18.

Academy

ReactJS Interview Prep - State Management (Part 5)