1. What is the Virtual DOM?
A lightweight copy of the real DOM. React uses it to detect changes and update only what's needed, improving performance.
2. What are components in React?
Building blocks of a UI.
Functional components (recommended)
Class components (legacy)
3. What are props and state?
Props: immutable inputs passed from parent
State: mutable data managed inside a component
4. What is JSX?
JavaScript syntax extension that allows writing HTML-like code in React components.
Example:
5. What are Hooks in React?
Special functions that let you use state and lifecycle features in functional components.
Examples: useState, useEffect, useContext, useRef
6. What does useEffect do?
Performs side effects (e.g., data fetching, subscriptions).
It runs after render, and can clean up if you return a function.
7. What is the difference between controlled and uncontrolled components?
Controlled: React handles input state
Uncontrolled: DOM handles state via refs
8. How do you lift state up in React?
Move shared state to the nearest common ancestor and pass it via props.
9. What is context in React?
A way to pass data through the component tree without using props manually at every level.
const MyContext = React.createContext()
10. What is the purpose of keys in React lists?
Helps React identify which items have changed.
Keys should be stable and unique (e.g., id).
11. What is reconciliation in React?
The process React uses to update the DOM by comparing the virtual DOM trees.
12. What are higher-order components (HOC)?
Functions that take a component and return a new enhanced component.
Used for code reuse.
13. What is a custom hook?
Your own function that uses built-in hooks to encapsulate logic across components.
14. How does useMemo() differ from useCallback()?
useMemo: memoizes a value
useCallback: memoizes a function
15. What is React Strict Mode?
A development tool that detects potential problems like unsafe lifecycle usage or legacy API usage.
16. What is lazy loading in React?
Load components or routes only when needed using React.lazy() and Suspense.
17. What is the difference between useEffect() and useLayoutEffect()?
useEffect: runs after paint
useLayoutEffect: runs before paint — can block visual updates
18. What is React Fiber?
React's reconciliation engine that enables incremental rendering and better scheduling.
19. What is useReducer() and when to use it?
Hook for complex state logic. Alternative to useState when state depends on previous state or has many transitions.
20. How does React handle forms?
Through controlled components using value and onChange or uncontrolled components with refs.
📘 Want to Master React Interviews?
These 20 questions are just the beginning.
🎁 Download Free Sample – React Interview Handbook
📚 Get Full eBook – The JavaScript Interview Bible
✅ Includes:
100+ real interview questions
Behavioral prep + whiteboard challenges
Updated for Hooks, Context, Router, and modern React
Find more interviewing ebooks on interviewbible.com
Top comments (0)