Back to Developer
React
React interview questions — core concepts, hooks, rendering & performance, and state management & ecosystem.
Core / Fundamentals
What is React?
A JavaScript library for building user interfaces based on components.
What is the Virtual DOM?
A lightweight in-memory representation of the real DOM used to optimize updates.
What is JSX?
A syntax extension for JavaScript that allows writing HTML-like code within JS.
State vs Props
State is internal and managed within the component; Props are external and passed from a parent.
Class vs Functional Components
Functional components are simpler JS functions; Class components use ES6 classes and have lifecycle methods.
Why is the key prop needed in lists?
It helps React identify which items have changed, been added, or removed for efficient rendering.
What is a React Fragment?
A syntax (<>...</>) to group multiple elements without adding extra nodes to the DOM.
What is a Higher-Order Component (HOC)?
A function that takes a component and returns a new component with additional logic.
What is Reconciliation?
The algorithm React uses to diff the virtual DOM and apply only the necessary updates.
What is StrictMode?
A tool for highlighting potential problems in an application during development.
Element vs Component
An Element is a plain object describing a UI; a Component is the function/class that returns it.
Benefits of React
Component-based architecture, great ecosystem, SEO-friendly (with SSR), and high performance.
Composition vs Inheritance
React encourages using composition (nesting components) over inheritance to reuse code.
What is React Fiber?
The current reconciliation engine designed to improve fluidity and support incremental rendering.
What is React and why is it used?
A UI library focused on declarative views, component reuse, and efficient rendering via Virtual DOM.
Why keys are important in lists?
They help React track element identity efficiently.
Why not use array index as key?
Breaks reconciliation algorithm when list order changes.
What is reconciliation algorithm complexity?
O(n) with heuristics using keys.
Hooks
What are Hooks?
Functions that let you use state and other React features in functional components.
Purpose of useEffect
Used for side effects like data fetching, subscriptions, or manual DOM manipulations.
What does useState do?
Declares a state variable that React preserves between re-renders.
useEffect vs useLayoutEffect
useEffect runs after the paint; useLayoutEffect runs synchronously before the paint.
What is useMemo?
A hook that memoizes the result of an expensive calculation to avoid unnecessary re-computation.
What is useCallback?
A hook that memoizes a function instance to prevent it from being recreated on every render.
What is useRef?
Creates a persistent reference that doesn't trigger a re-render when its value changes.
What is useContext?
Allows access to global data (like themes or users) without manual prop drilling.
Purpose of useReducer
An alternative to useState for complex state logic, similar to the Redux pattern.
Rules of Hooks
1. Only call them at the top level. 2. Only call them from React functions or custom hooks.
What is a Custom Hook?
A JS function starting with "use" that can call other hooks to reuse stateful logic.
What is forwardRef?
A technique for passing a ref automatically through a component to a child.
What is useId?
A hook for generating unique IDs that are stable across the server and client.
Lifecycle: Mounting
constructor, render, componentDidMount (Class); useEffect with [] (Function).
Lifecycle: Unmounting
componentWillUnmount (Class); useEffect cleanup function (Function).
What is useSyncExternalStore?
A hook for subscribing to external stores (e.g., browser APIs) in a way that’s safe for concurrent rendering.
What is a Side Effect?
Any operation that affects something outside the scope of the function being executed (e.g., API calls).
What problems do hooks solve?
They remove class complexity and enable logic reuse via custom hooks.
How does dependency array work?
Controls when effects re-run based on shallow comparison.
What is useReducer?
Alternative to useState for complex state logic.
How to handle async effects?
Use useEffect with cleanup and abort controllers.
When to use refs over state?
When changes shouldn't trigger re-render.
Rendering & Performance
How to optimize React performance?
Use React.memo, useMemo, useCallback, lazy loading, and avoid anonymous functions in render.
What is React.memo?
A higher-order component that prevents a functional component from re-rendering if props stay the same.
What happens during setState?
React schedules an update, merges the new state, and triggers a re-render of the component tree.
Why not mutate state directly?
React detects changes by reference; mutating the original object prevents it from triggering a re-render.
What is a Pure Component?
A component that returns the same output for the same props and state, skipping unnecessary renders.
React 18 Batching
React's ability to group multiple state updates into a single re-render for better performance.
What causes re-renders?
State changes, prop changes, or context updates.
How does React handle immutability?
Relies on reference changes to detect updates.
What is Concurrent React?
Allows interruptible rendering for better UX.
How does Suspense differ from useEffect?
Suspense handles async at render level.
State, Data Flow & Ecosystem
What is Lifting State Up?
Moving state to the closest common ancestor to share data between sibling components.
Controlled vs Uncontrolled Components
Controlled components manage form data via state; Uncontrolled use the DOM (via Refs).
What are Error Boundaries?
Class components that catch JS errors in their child tree and display a fallback UI.
What is Prop Drilling?
The process of passing data through several levels of components that don't need it.
React.lazy and Suspense
Used for code-splitting to load components only when they are needed.
How to handle events in React?
React uses SyntheticEvents, which are cross-browser wrappers around the browser’s native events.
What is Redux?
An external library for global state management following a unidirectional data flow.
What are Portals?
They provide a way to render children into a DOM node that exists outside the parent hierarchy.
What is Hydration?
The process of attaching event listeners to server-rendered HTML to make it interactive.
What is CSS-in-JS?
A styling approach where CSS is written using JS (e.g., Styled Components) for local scoping.
How to test React?
Commonly tested with Jest (test runner) and React Testing Library (UI-focused testing).
Redux vs Context API
Context is for prop passing; Redux is a full state management system with advanced dev tools.
What is SSR?
Server-Side Rendering: rendering the app to HTML on the server for faster initial load and SEO.
What is Context API?
Way to pass data without prop drilling.
SSR vs CSR
SSR improves initial load/SEO; CSR shifts work to client.
What is code splitting?
Loading code on demand to reduce bundle size.
What is Flux architecture?
Unidirectional data flow pattern.
How to structure large React apps?
Feature-based folders, shared hooks, domain separation.
Unit vs integration tests
Unit tests isolate logic; integration tests verify interaction.
What are synthetic events?
React wrapper around native browser events.
How to handle forms at scale?
Controlled inputs + validation libraries.
Security concerns in React
XSS prevention via escaping, avoid dangerously SetInnerHTML.
How React handles XSS?
Escapes values by default.