1. What is the "Reconciliation" algorithm in React Fiber?

Reconciliation is the process through which React updates the DOM. In Fiber, this is divided into two phases:

Render Phase: Asynchronous and interruptible. React identifies changes by comparing the current tree with the new one (diffing).
Commit Phase: Synchronous and uninterruptible. React applies the changes to the real DOM.

2. Explain the "Fiber" data structure.

A Fiber is a plain JavaScript object that represents a unit of work. It contains information about a component, its input (props), and its output. Unlike the old stack-based reconciler, Fiber allows React to pause, reuse, or abort work, enabling features like Concurrency.

3. How does `useTransition` help in improving UX?

useTransition allows you to mark state updates as "transitions," which are low-priority. This prevents heavy re-renders from blocking urgent interactions (like typing in an input). React will keep the current UI responsive while rendering the transition in the background.

4. What is the difference between `useDeferredValue` and `useTransition`?

useTransition: Used when you have access to the state update code. It wraps the setState call.
useDeferredValue: Used when you receive a value from a parent (e.g., via props) and want to "defer" the re-render of a child component that uses that value.

5. What are "React Server Components" (RSC) and how do they differ from SSR?

SSR: Generates HTML on the server, but still sends the full JS bundle for hydration.
RSC: Components that stay on the server. They ship zero JavaScript to the client. They allow direct access to backend resources (DB, File System) and reduce the "waterfall" of data fetching.

6. What is "Hydration Mismatch" and how do you debug it?

A mismatch occurs when the server-rendered HTML differs from the first client-side render (e.g., using new Date() or window only on the client). Debugging involves checking for browser-only APIs in the render path or using suppressHydrationWarning.

7. Explain the "Rules of Hooks" and why they exist.

Hooks must be called at the top level and only from React functions. These rules ensure that hooks are called in the same order every time, which is how React preserves the state of hooks between renders using an internal linked list or array.

8. What is the purpose of `useSyncExternalStore`?

It is a hook recommended for subscribing to external data stores (like Redux or a custom store). It ensures "tearing" doesn't occur in Concurrent Rendering—where different parts of the UI show different values for the same store data.

9. What is "Component Composition" vs "Inheritance" in React?

React strictly follows a composition model. Instead of extending classes (inheritance), you pass components as props (e.g., children) or use Higher-Order Components / Render Props. This makes code more predictable and reusable.

10. How does the `useReducer` hook compare to Redux?

useReducer is built-in and scoped to a component or a context. Redux is an external library providing a global store with middleware, devtools (time travel), and a more opinionated architecture. useReducer is often sufficient for complex local state.

11. What is the "exhaustive-deps" lint rule and why is it critical?

It ensures that all variables used inside useEffect, useCallback, or useMemo are declared in the dependency array. Ignoring this can lead to stale closures, where the hook uses values from an old render.

12. Explain "Stale Closures" in React Hooks.

Stale closures occur when a function (like a click handler or effect) captures variables from a previous render because it wasn't updated in the dependency array. The function "remembers" the old values even after the state has changed.

13. What is "Automatic Batching" in React 18?

Previously, React only batched updates inside React event handlers. In React 18, all updates (even inside promises, timeouts, or native events) are batched automatically, reducing the number of re-renders.

14. What is the difference between `useEffect` and `useLayoutEffect`?

useEffect: Runs asynchronously after the browser has painted the screen.
useLayoutEffect: Runs synchronously before the browser paints. Use it for measuring DOM or preventing layout shifts (flickering).

15. What is the "Double Invoke" of effects in Strict Mode?

In development, React 18+ mounts, unmounts, and remounts every component to ensure that your effects are resilient to being destroyed and recreated (helping find missing cleanup functions).

16. How do you optimize a React Context to prevent unnecessary re-renders?

Split the context into multiple contexts (e.g., StateContext and DispatchContext).
Memoize the value passed to the Provider using useMemo.
Use React.memo on the consumer components.

17. What is "Higher-Order Component" (HOC) and was it replaced by Hooks?

HOCs are functions that take a component and return an enhanced one. While Hooks replaced the need for HOCs in most "logic sharing" cases, HOCs are still useful for cross-cutting concerns like logging, authentication, or injecting props.

18. Explain "Portals" and their use cases.

Portals allow you to render children into a DOM node outside the parent's hierarchy. Common use cases include Modals, Tooltips, and Loaders that need to break out of absolute positioning or overflow: hidden.

19. What is "Suspense for Data Fetching"?

A pattern where a component "suspends" its rendering until an asynchronous operation (like a fetch) completes. It allows you to declaratively handle loading states at the parent level using the Suspense boundary.

20. What is "Error Boundary" and why can't it be a functional component?

Error boundaries are components that catch JS errors in their child tree. Currently, they must be class components because they require the getDerivedStateFromError or componentDidCatch lifecycle methods, which don't have hook equivalents yet.

21. How does React handle "Synthetic Events"?

React uses event delegation. Instead of attaching listeners to individual nodes, it attaches a single listener to the root (usually document or the app root in v17+). This improves performance and ensures consistent behavior across browsers.

22. What is the `key` prop's role during the "Diffing" process?

Keys help React identify which items in a list have changed, been added, or removed. Without keys, React would re-render the entire list or incorrectly map state to the wrong elements when items are reordered.

23. What is "Pre-rendering" vs "Streaming"?

Pre-rendering: Generates the whole page's HTML before sending it.
Streaming: Breaks the HTML into chunks and sends them as they are ready. This allows the user to see parts of the page (like the header) while heavy components are still rendering.

24. What is `useInsertionEffect` and when should it be used?

It is a hook intended for CSS-in-JS library authors. It runs before useLayoutEffect and is used to inject styles into the DOM before layout is calculated, avoiding style recalculation performance hits.

25. Explain the "Render-as-You-Fetch" pattern.

Instead of "Fetch-on-Render" (fetching inside useEffect), you start the fetch as early as possible (e.g., when the user clicks a link) and then render the component, which "suspends" if the data isn't ready.

26. What is "Selective Hydration"?

A React 18 feature that allows React to hydrate different parts of the page independently. If a user clicks on a button in a non-hydrated area, React will prioritize hydrating that specific component first.

27. How do you implement "Infinite Scroll" efficiently?

Using the Intersection Observer API to detect when a "sentinel" element enters the viewport, combined with a throttled/debounced fetch call and a keyed list to prevent unnecessary re-renders.

28. What is "Shared State" vs "Global State"?

Shared State: Passed between a few components via props or a small Context.
Global State: Accessible by the entire application (e.g., Auth, Theme) usually managed by Redux, Zustand, or a global Context.

29. What is the difference between `React.memo` and `React.useMemo`?

React.memo: A wrapper for components to prevent re-renders if props haven't changed (higher-order component).
useMemo: A hook to memoize the result of a specific calculation inside a component.

30. What is "Prop Shorthand" and "Spread Attributes"?

Shorthand allows passing props like {...props}. While convenient, it can make it harder to track which props are being used and may accidentally pass unnecessary attributes to the DOM.

31. Explain "CSS-in-JS" vs "CSS Modules".

CSS-in-JS (Styled Components): Styles are written in JS; allows dynamic styling based on props; has runtime overhead.
CSS Modules: Standard CSS files with scoped class names; zero runtime overhead; better performance for static sites.

32. What is "Controlled Form" performance optimization?

For large forms, controlled components can cause lag because every keystroke triggers an app-wide re-render. Optimization includes using useRef (uncontrolled) or localizing the state to a smaller component.

33. What is "Atomic State Management"?

Libraries like Recoil or Jotai that manage state in small, independent "atoms." This allows components to subscribe only to the specific pieces of state they need, avoiding the large re-renders common in large Context trees.

34. What is "Static Side Generation" (SSG) with Dynamic Routes?

Using getStaticPaths (Pages Router) or generateStaticParams (App Router) to pre-render pages for a dynamic set of IDs/slugs at build time.

35. Explain "Incremental Static Regeneration" (ISR).

Allows you to update static pages after you've built your site. You specify a revalidate time, after which Next.js will regenerate the page in the background on the next request.

36. What is "Skeleton Loading" and how is it better than Spinners?

Skeletons mimic the final layout of the content, reducing perceived wait time and preventing layout shifts as content pops in.

37. What is "Custom Hook" for API fetching?

A function that encapsulates useState and useEffect (or useSWR/React Query) to handle loading, error, and data states, making the UI component cleaner.

38. How do you handle "Race Conditions" in `useEffect` fetching?

Use a cleanup variable (e.g., let ignore = false) inside the effect. Setting it to true in the cleanup function ensures that if a new fetch starts, the result of the previous one is ignored if it returns later.

39. What is "Strict Domain" for `next/image`?

Next.js requires you to whitelist external domains in next.config.js to prevent unauthorized people from using your image optimization API.

40. What is "Middleware" in Next.js?

Code that runs before a request is completed. It allows for redirects, rewrites, and authentication checks at the "Edge," significantly closer to the user.

41. Explain the "App Router" Directory Structure.

Uses folders to define routes and special files like page.tsx, layout.tsx, loading.tsx, and error.tsx to handle different UI states for that route.

42. What is the "Children" prop in TypeScript?

Usually typed as React.ReactNode, it allows any valid React child (string, element, fragment, etc.) to be passed into a component.

43. Explain "Memoization" pitfalls.

Over-memoizing can actually hurt performance because of the memory and comparison overhead. It should only be used for expensive calculations or when passing props to React.memo optimized components.

44. What is "Zustand" and why is it popular?

A small, fast, and scalable bear-bones state-management solution. It is simpler than Redux and doesn't require complex providers or boilerplate.

45. What is "React Testing Library" vs "Enzyme"?

Enzyme: Focused on implementation details (state, props). (Deprecated).
RTL: Focused on user behavior (clicking buttons, finding text). It encourages accessible code.

46. What is "Mock Service Worker" (MSW)?

A tool for mocking APIs by intercepting requests at the network level. It allows you to test your React components without a real backend while keeping the fetch logic intact.

47. Explain "Snapshot Testing".

Captures the rendered output of a component and compares it to a saved version. It's useful for catching unexpected UI changes but shouldn't be the primary testing method.

48. What is "Tearing" in UI?

A visual inconsistency where different parts of the UI display different values for the same piece of data during a single render (prevented by useSyncExternalStore).

49. What is "Profiling" in React?

Using the React DevTools Profiler to record a session and see why components are re-rendering, how long they took, and which state changes triggered them.

50. What is "Clean Architecture" in React?

Separating the UI (Components) from the logic (Hooks/Services) and the data (Stores). This makes the application easier to test, maintain, and scale.

React Interview Questions

Table of Contents

What is the "Reconciliation" algorithm in React Fiber?

Explain the "Fiber" data structure.

How does <code>useTransition</code> help in improving UX?

What is the difference between <code>useDeferredValue</code> and <code>useTransition</code>?

What are "React Server Components" (RSC) and how do they differ from SSR?

What is "Hydration Mismatch" and how do you debug it?

Explain the "Rules of Hooks" and why they exist.

What is the purpose of <code>useSyncExternalStore</code>?

What is "Component Composition" vs "Inheritance" in React?

How does the <code>useReducer</code> hook compare to Redux?

What is the "exhaustive-deps" lint rule and why is it critical?

Explain "Stale Closures" in React Hooks.

What is "Automatic Batching" in React 18?

What is the difference between <code>useEffect</code> and <code>useLayoutEffect</code>?

What is the "Double Invoke" of effects in Strict Mode?

How do you optimize a React Context to prevent unnecessary re-renders?

What is "Higher-Order Component" (HOC) and was it replaced by Hooks?

Explain "Portals" and their use cases.

What is "Suspense for Data Fetching"?

What is "Error Boundary" and why can't it be a functional component?

How does React handle "Synthetic Events"?

What is the <code>key</code> prop's role during the "Diffing" process?

What is "Pre-rendering" vs "Streaming"?

What is <code>useInsertionEffect</code> and when should it be used?

Explain the "Render-as-You-Fetch" pattern.

What is "Selective Hydration"?

How do you implement "Infinite Scroll" efficiently?

What is "Shared State" vs "Global State"?

What is the difference between <code>React.memo</code> and <code>React.useMemo</code>?

What is "Prop Shorthand" and "Spread Attributes"?

Explain "CSS-in-JS" vs "CSS Modules".

What is "Controlled Form" performance optimization?

What is "Atomic State Management"?

What is "Static Side Generation" (SSG) with Dynamic Routes?

Explain "Incremental Static Regeneration" (ISR).

What is "Skeleton Loading" and how is it better than Spinners?

What is "Custom Hook" for API fetching?

How do you handle "Race Conditions" in <code>useEffect</code> fetching?

What is "Strict Domain" for <code>next/image</code>?

What is "Middleware" in Next.js?

Explain the "App Router" Directory Structure.

What is the "Children" prop in TypeScript?

Explain "Memoization" pitfalls.

What is "Zustand" and why is it popular?

What is "React Testing Library" vs "Enzyme"?

What is "Mock Service Worker" (MSW)?

Explain "Snapshot Testing".

What is "Tearing" in UI?

What is "Profiling" in React?

What is "Clean Architecture" in React?