React Interviews – Top Questions & Answers for Web Developers
React is a JavaScript library for building fast, interactive user interfaces. It helps developers create UI using reusable components.
A component is a reusable, self-contained block of UI. Think of components as Lego blocks used to build an entire interface.
| Functional Components | Class Components |
|---|---|
| Use functions | Use ES6 classes |
| Rely on Hooks for state | Use this.state |
| Simple, faster | More code-heavy |
| Recommended | Legacy |
Modern React prefers functional components + hooks.
Hooks let functional components use state, lifecycle features, and side effects (e.g., useState, useEffect, useMemo).
JSX is a JavaScript syntax extension that lets you write HTML-like UI code directly inside JavaScript.
Keys help React identify items in lists and update only what changes—improving speed and correctness.
A lightweight copy of the actual DOM. React compares versions and updates only the changed parts, making UI faster.
React uses reconciliation, where it compares the Virtual DOM with the previous version and updates only differences.
React Fiber is the updated reconciliation engine enabling smoother UI updates, prioritization, and better rendering.
useState creates a reactive value that re-renders the component whenever it changes.
useEffect performs side effects like API calls, subscriptions, timers after the component renders.
It memoizes expensive calculations so they don’t re-run unnecessarily.
It memoizes callback functions to prevent re-renders in child components.
A mutable object that persists across renders. Great for DOM access or storing values without re-rendering.
Used to share data globally across components without prop drilling.
Passing data through multiple levels of components unnecessarily.
Use:
- Context API
- Redux
- Zustand
- Jotai
- Recoil
A built-in state-sharing system allowing global data access.
Form elements where React controls the input value via state.
Form elements where values are handled by DOM using refs.
A predictable state management library using a single global store.
- Single source of truth
- State is read-only
- Changes via pure reducers
The modern way to write Redux — cleaner, faster, reduces boilerplate.
A library for navigation inside React applications using URL-based routing.
<></> or <React.Fragment> — used to wrap multiple children without adding extra nodes.
Functions that take a component and return an enhanced component.
A technique to share logic by passing a function as a prop.
React’s process of comparing the Virtual DOM with the previous version.
A fast tree comparison algorithm used by React to detect changes efficiently.
React’s wrapper around DOM events providing consistent behavior across browsers.
They render components outside the parent DOM hierarchy via ReactDOM.createPortal.
A component that catches JavaScript errors inside UI and prevents app crashes.
| useEffect | useLayoutEffect |
|---|---|
| Runs after paint | Runs before paint |
| Non-blocking | Blocking |
Rendering React on the server before sending HTML to the browser. Used by Next.js.
Attaching React event listeners to pre-rendered HTML from the server.
Build-time HTML generation — fast and SEO-friendly.
A mechanism for handling loading states and asynchronous rendering.
Loading components only when required using React.lazy.
Breaking bundles into smaller chunks loaded on demand.
React.memo prevents unnecessary re-renders for pure components.
| Props | State |
|---|---|
| Passed from parent | Managed inside component |
| Immutable | Mutable |
| Read-only | Writable |
Moving shared state to the nearest common parent.
A component that re-renders only if props or state change.
Helps detect common bugs by running certain functions twice in development.
Allows React to interrupt and prioritize updates for smoother UIs.
Combining multiple state updates into a single re-render.
A JavaScript function that uses hooks to share reusable logic.
Changing keys cause re-mounting; stable keys preserve component state.
Allows passing refs through components to child elements.
A type-checking system for validating component props.
Default values assigned to props if no value is provided.
componentDidMountcomponentDidUpdatecomponentWillUnmount
Anything outside React’s pure rendering:
- API calls
- Subscriptions
- Timers
- Memoization
- Code splitting
- Virtualization
- Avoid anonymous functions
- Use keys properly
A browser extension to inspect React component structure and performance.
Never modify state directly. Always create new copies.
Direct updates bypass React’s lifecycle and won't trigger re-render.
Events propagate from child → parent. React uses it via synthetic events.
Attaching one event listener to a parent instead of many children.
A utility to conditionally join class names.
- Automatic batching
- Suspense improvements
- startTransition
- Server Components
Marks updates as “non-urgent” so UI remains responsive.
New type of components rendered on the server without sending JavaScript to the client.
Mismatch between server-rendered HTML and client-side JavaScript.
Generates unique IDs for accessibility and hydration-safe identifiers.
React compares previous and current Virtual DOM and updates only what's changed.
UI updates instantly before server confirmation, then syncs.
A wrapper to show fallback content during data loading.
Rendering only visible list items using libraries like react-window.
Client-side render differs from pre-rendered HTML — causes warnings.
An alternative to useState for complex state logic.
Checking only the top-level values of objects, not nested ones.
Compares nested values but expensive and slow.
Moving shared state to the nearest parent so children can access it.
Helps identify side-effect issues in development.
A return function inside useEffect used to clean resources.
They use one HTML file and change UI dynamically without reloading.
Server sends HTML in chunks for faster rendering.
| SSR | CSR |
|---|---|
| Rendered on server | Rendered in browser |
| SEO-friendly | Slower initial load |
Temporary loading UI shown during async operations.
A mismatch during hydration due to incorrect HTML.
A React framework providing SSR, SSG, API routes, routing, and optimizations.
Data flows parent → child, ensuring predictable UI.
Transforms JSX → JavaScript, bundles modules, optimizes output.
Previously recycled event objects to improve performance (now disabled).
A React feature allowing components to “wait” for async data.
Returns a deferred version of a value for smoother updates.
Virtual DOM is faster, lightweight, and updated in memory.
Tool like Webpack or Vite that compiles, bundles and optimizes code.
React’s entry point for hydrating SSR HTML using createRoot.
Clones an element with additional props.
Removing a component from the DOM.
When a function captures outdated state values due to closure behavior.
StrictMode intentionally triggers it to catch side-effect bugs.
Using array index as key may cause incorrect re-renders.
Customizes the instance value exposed with forwardRef.
Controls when useEffect re-runs.
Effect runs only once after initial render.
Effect runs after every render — usually harmful.
- Component-based design
- Fast rendering
- Huge ecosystem
- Reusable logic
- Easy to scale