React Quiz: 20 Interview Questions and Answers for Frontend Developers (2026)

Q1. What is the primary purpose of the Virtual DOM?

✅ Answer: To batch and optimize real DOM updates, making UI updates faster

💡 React keeps a representation of the UI in memory (Virtual DOM) and syncs it with the real DOM using a diffing algorithm (reconciliation).

Q2. What is the rule of thumb for using React Hooks?

✅ Answer: Only call Hooks at the top level of your functional component (not inside loops or conditions)

💡 React relies on the order in which Hooks are called. Conditional calls break the call sequence and cause bugs.

Q3. Which hook should you use to store a mutable value that does not trigger a re-render?

✅ Answer: useRef

💡 `useRef` returns a mutable ref object whose `.current` property can hold any value, without triggering a component update when it changes.

Q4. What is the difference between useMemo and useCallback?

✅ Answer: useMemo memoizes the computed value of a function; useCallback memoizes the function definition itself

💡 Use `useMemo` for expensive calculations. Use `useCallback` to prevent child components from re-rendering when passing callback props.

Q5. How does the useEffect cleanup function work?

✅ Answer: It runs before the component unmounts and before the effect runs again

💡 Returning a function from `useEffect` allows you to clear timers, cancel network requests, or clean up event listeners.

Q6. What happens when state changes in a React component?

✅ Answer: The component and all of its child components re-render by default

💡 State updates trigger a re-render. To prevent unnecessary child re-renders, you can wrap children in `React.memo`.

Q7. What is "prop drilling" in React?

✅ Answer: Passing props through multiple nested child components that do not need the data themselves

💡 Prop drilling can make code hard to maintain. It is solved by using React Context, state libraries (Redux/Zustand), or slot patterns.

Q8. What is the purpose of the key prop in React lists?

✅ Answer: It helps React identify which items have changed, been added, or been removed

💡 Keys must be stable, predictable, and unique among siblings. Using array index as keys is discouraged for dynamic lists.

Q9. How do you create a context in React?

✅ Answer: Using the createContext function

💡 `const MyContext = createContext(defaultValue);` creates a context container. Components consume it using the `useContext` hook.

Q10. What is the purpose of the useReducer hook?

✅ Answer: To manage complex state transitions using a reducer function, similar to Redux

💡 It is preferred over `useState` when state logic involves multiple sub-values or when the next state depends on the previous one.

Q1. What are React Server Components (RSC)?

✅ Answer: Components that render exclusively on the server, sending pre-rendered HTML/JSON to the client

💡 Server Components reduce bundle size by leaving server-only dependencies on the server, and improve page load times.

Q2. How do you designate a component as a Client Component in modern Next.js/React?

✅ Answer: Add the "use client" directive at the very top of the file

💡 All files are Server Components by default in modern frameworks. `"use client"` is required if the component uses hooks or event listeners.

Q3. What is the purpose of the Suspense component?

✅ Answer: It lets you display a fallback UI while children are loading or resolving data async

💡 `⚡ <Suspense fallback={<Loader />}> <MyAsyncComponent /> </Suspense>` manages async loading boundaries declaratively.

Q4. Which hook was introduced in React 19 to handle transitions and pending states?

✅ Answer: useTransition

💡 `useTransition` returns a pending state and a function to wrap state updates, letting you run state transitions without blocking the UI.

Q5. What does the useActionState hook do in React 19?

✅ Answer: It simplifies state management for form submissions (formerly useFormState)

💡 It automatically handles form action state, pending status, and errors directly from action functions.

Q6. What is the difference between controlled and uncontrolled inputs?

✅ Answer: Controlled inputs have state-driven values; uncontrolled inputs rely on DOM refs

💡 Controlled inputs use `value` and `onChange`. Uncontrolled inputs use `ref` or `defaultValue`, letting the browser store input state.

Q7. What does code-splitting accomplish in a React application?

✅ Answer: It loads JavaScript chunks dynamically on demand, reducing initial bundle size

💡 Usually implemented using `React.lazy` and dynamic imports, code-splitting speeds up initial website loading.

Q8. What is the purpose of the useDeferredValue hook?

✅ Answer: To defer updating a part of the UI until more urgent updates are completed

💡 Useful for search filters. It keeps the typing input responsive while deferring the heavy filtered list update.

Q9. How do you handle errors inside React component trees?

✅ Answer: By wrapping components in an Error Boundary

💡 Error Boundaries are class components that catch JavaScript errors anywhere in their child component tree, rendering a fallback UI.

Q10. What is the purpose of the new "use" API in React 19?

✅ Answer: It reads promises or context values conditionally inside loops or branch logic

💡 Unlike hooks, `use` can be called inside conditional blocks and loops, offering a more flexible way to consume promises/context.

Should I learn Next.js or raw React?

Learn React fundamentals first. Once you understand state, props, and hooks, transition to Next.js, as modern React features (like Server Components) are built to be used within meta-frameworks.

Does React 19 support class components?

Yes, React 19 still supports class components for backward compatibility, but hooks are the modern standard, and class components cannot be used inside Server Components.

What is the best alternative to Redux for simple state management?

Zustand is highly popular due to its simple hook-based API, minimal boilerplate, and excellent performance. React's built-in Context API is also perfect for smaller apps.