1. What is React and why use it?
Answer: React is a JavaScript library for building UI components. It allows developers to create
reusable components, improves performance with a virtual DOM, and makes state management
predictable. It’s used to build dynamic, interactive web applications efficiently.
2. Difference between Class and Functional Components
Answer:
• Class Components: Use ES6 classes, have state and lifecycle methods
(componentDidMount, componentDidUpdate).
• Functional Components: Are plain JS functions, cannot use this, but with hooks (useState,
useEffect) they can manage state and side effects. Functional components are simpler and
more readable.
3. What are props in React?
Answer: Props are read-only inputs passed from parent to child components. They allow data to
flow down the component tree. Example:
function Child({name}) {
return <h1>Hello, {name}</h1>;
4. What is state in React?
Answer: State is an object that holds dynamic data for a component. Changing state triggers re-
rendering of the component. Example:
const [count, setCount] = useState(0);
5. Explain React lifecycle methods
Answer: For class components:
• componentDidMount: runs after component mounts.
• componentDidUpdate: runs after updates.
• componentWillUnmount: runs before unmounting.
For functional components, useEffect replaces lifecycle methods.
6. What is Virtual DOM?
Answer: Virtual DOM is a lightweight copy of the real DOM. React updates only the changed parts,
reducing expensive DOM manipulations, improving performance.
7. Explain JSX
Answer: JSX is a syntax extension for JavaScript that looks like HTML. React uses it to define UI
structure. Example:
const element = <h1>Hello World</h1>;
8. Explain keys in React
Answer: Keys help React identify elements in lists for efficient re-rendering. They must be unique
among siblings. Example:
{[Link](item => <li key={[Link]}>{[Link]}</li>)}
9. Difference between controlled and uncontrolled components
Answer:
• Controlled: Input value is managed by React state.
• Uncontrolled: Input value is managed by DOM, accessed via refs.
10. Explain React hooks
Answer: Hooks allow functional components to manage state and side effects:
• useState: state management.
• useEffect: handle side effects (like lifecycle methods).
• useRef: access DOM nodes or persist values across renders.
• useMemo / useCallback: optimize performance.
11. Explain context API
Answer: Provides global state without prop drilling. Example:
const ThemeContext = [Link]('light');
<[Link] value="dark">
<Child />
</[Link]>
12. What is Redux?
Answer: Redux is a state management library. It centralizes the state in a single store and uses
actions and reducers to update it predictably.
13. Explain React Router
Answer: React Router handles client-side routing. It allows navigation without full page reloads.
Example:
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
14. Explain higher-order components (HOC)
Answer: HOCs are functions that take a component and return a new component with enhanced
functionality. Example: withAuth(Component) adds authentication features.
15. Explain PureComponent and [Link]
Answer:
• PureComponent: Class component that implements shouldComponentUpdate with
shallow comparison.
• [Link]: Functional component equivalent to PureComponent to prevent unnecessary
re-renders.
16. Explain error boundaries
Answer: Error boundaries catch runtime errors in child components, preventing the app from
crashing. They implement componentDidCatch.
17. What is reconciliation in React?
Answer: Reconciliation is React’s process of updating the real DOM efficiently by diffing the Virtual
DOM and applying minimal changes.
18. Explain React fragment
Answer: <></> or <[Link]> allows grouping multiple elements without adding extra
nodes to DOM.
19. Difference between stateful and stateless components
Answer:
• Stateful: Have internal state ([Link] or useState).
• Stateless: Do not have state, rely on props only.
20. How to optimize React performance
Answer:
• Use [Link] and PureComponent.
• Avoid anonymous functions in render.
• Use useMemo / useCallback.
• Lazy load components with [Link] and Suspense.
• Virtualize large lists with react-window or FlatList (React Native).
