| Question |
Answer |
| What is the virtual DOM and why is it useful? | It's a lightweight copy of the real DOM. React uses it for fast diffing and efficient updates. |
| How does React handle events? | React wraps native events in SyntheticEvent for cross-browser compatibility and pooling optimization. |
| Can you explain render props? | A technique where a component passes a function to its child to control rendering logic. |
| What are HOCs (Higher Order Components)? | Functions that take a component and return a new one with added functionality. |
| Explain lazy loading in React. | React's React.lazy() and Suspense allow components to load on demand, improving performance. |
| Difference between SSR and CSR in React? | SSR renders components on server (e.g., Next.js). CSR renders in browser. SSR boosts SEO and performance. |
| How do you manage side effects in React? | Using useEffect, custom hooks, or external libraries like Redux-Thunk or Redux-Saga. |
| What is prop drilling and how to avoid it? | Passing props through many layers. Avoid using Context API or libraries like Redux. |
| What is the difference between useLayoutEffect and useEffect? | useLayoutEffect runs synchronously after render; useEffect runs asynchronously after painting. |
| What is a custom hook? | A function starting with “use” that encapsulates reusable logic using hooks. |
| What is code splitting in React? | Code splitting breaks the app into smaller bundles using tools like Webpack and React.lazy() for faster load times. |
| What is tree shaking? | Tree shaking removes unused code during the build process, reducing bundle size. |
| How does debouncing improve performance? | Limits the rate at which a function runs (e.g. on scroll/input), preventing excessive re-renders. |
| What are React’s rendering phases? | Render phase and commit phase. Render is pure, commit applies changes. |
| How can you avoid unnecessary re-renders? | Use React.memo, useMemo, useCallback, avoid changing references, and properly manage props. |
