Part 1 - Complete Interview Questions & Answer Bank
Full collection of 50 essential React interview questions, key takeaways, and self-assessment checks.
Q1: What is the Virtual DOM and how does React use it?
The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes occur, React creates a new Virtual DOM tree, compares it with the previous one using a diffing algorithm (Reconciliation), and batch updates only the changed elements in the real DOM for optimal performance.
- Virtual DOM minimizes direct real DOM manipulations to boost rendering performance.
- React uses a diffing algorithm during Reconciliation to compute minimal real DOM updates.
What process does React use to compare the new Virtual DOM with the previous one?
Q2: What is JSX and why do we use it in React?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like markup directly inside JavaScript files. Compilers like Babel transform JSX syntax into standard React.createElement() function calls at compile time.
- JSX allows writing component structure and rendering logic in a visual, declarative syntax.
- Babel transpiles JSX tags into standard
React.createElement()function calls.
What does JSX transpile to under the hood?
Q3: What is the difference between State and Props in React?
Props (short for properties) are read-only inputs passed from parent components to child components to configure them. State represents internal, dynamic data managed within a component that can change over time and triggers component re-renders when updated.
- Props are immutable data passed down from parent components.
- State is local component data managed dynamically that triggers re-renders on change.
Which of the following describes Props accurately?
Q4: How does the useState Hook work?
The useState hook allows functional components to manage local state. It accepts an initial state value as an argument and returns an array containing two elements: the current state value and a updater function to modify that state value.
useStatereturns an array with the current state and its setter function.- Calling the state setter function schedules a re-render of the component with updated values.
What does the useState hook return?
Q5: What is the useEffect Hook and how is its dependency array used?
The useEffect hook enables functional components to perform side effects (like data fetching, subscriptions, or DOM mutations). Its behavior is controlled by a dependency array: omitting it runs every render, an empty array [] runs once on mount, and specifying dependencies [dep] runs when those values change.
useEffectencapsulates side-effect operations in functional components.- The dependency array dictates when the effect executes (mount, update, or unmount cleanup).
When does a useEffect callback run if passed an empty dependency array []?
Q6: Why are keys important when rendering lists in React?
Keys are unique string identifiers used by React to track which list items have changed, been added, or been removed. Proper keys enable efficient Reconciliation during Virtual DOM diffing. Using array indices as keys is discouraged for dynamic lists as it can lead to state bugs during reordering.
- Keys help React identify elements uniquely during list diffing.
- Stable, unique keys prevent incorrect state mapping during list reordering or deletions.
Why is using array index as a key for dynamic lists considered bad practice?
Q7: What are the main phases of the React component lifecycle?
The React lifecycle consists of three primary phases: Mounting (component creation and insertion into DOM), Updating (re-rendering due to state or props changes), and Unmounting (removal from DOM). Functional components handle these using hooks like useEffect.
- Lifecycle phases: Mounting, Updating, and Unmounting.
- Class lifecycle methods (
componentDidMount,componentWillUnmount) map touseEffectin functional components.
Which lifecycle cleanup method corresponds to returning a function from useEffect?
Q8: What is the React Context API and when should you use it?
The Context API provides a way to pass data through the component tree without manually passing props at every level (prop drilling). It is ideal for global state like user authentication, theme settings, or language preferences.
- Context solves prop drilling by exposing data globally to wrapped component subtrees.
- Best used for broadcasted low-frequency updates like user sessions, themes, or locale.
Which hook is used to consume values from a React Context in functional components?
Q9: What is React.memo and how does it optimize performance?
React.memo is a higher-order component that memoizes functional components. It skips re-rendering a component if its incoming props have not changed according to a shallow equality check.
React.memoprevents unnecessary re-renders of functional components when props remain identical.- Uses shallow comparison by default for prop diffing.
What type of comparison does React.memo perform on props by default?
Q10: What is the difference between useCallback and useMemo?
useCallback memoizes callback function instances across re-renders to maintain reference stability. useMemo memoizes the calculated result value of an expensive function call across re-renders.
useCallback(fn, deps)returns a memoized function instance.useMemo(() => value, deps)returns a memoized calculated value.
Which hook is specifically designed to memoize the computed return value of a heavy calculation?