| Question |
Answer |
| What is the role of Webpack in React performance? | Webpack bundles code, enables optimization like code splitting and tree shaking. |
| How do you handle large datasets efficiently in React? | Use virtualization (react-window, react-virtualized), pagination, and memoized lists. |
| Why use dynamic imports in React? | Loads components only when needed, improving initial load time and reducing bundle size. |
| How do you prevent memory leaks in React? | Clean up subscriptions, timers, and async tasks in useEffect return function or componentWillUnmount. |
| What is throttling vs debouncing? | Throttling limits executions to every X ms; debouncing delays execution until events stop for X ms. |
| What tools are commonly used for testing React apps? | Jest for unit tests, React Testing Library for component testing, Cypress for end-to-end testing. |
| How do you test asynchronous actions in React? | Use async/await, mocks (like jest.mock), and waitFor from RTL to wait for changes. |
| What is shallow rendering? | Rendering a component without its children—useful for unit tests with Enzyme. |
| How do you test hooks? | Extract logic into custom hooks and test them separately with React Testing Library's renderHook. |
| What is snapshot testing? | Captures rendered output of a component and compares it with previous snapshots to detect unexpected changes. |
| Explain container vs presentational components. | Container: handles logic and state. Presentational: purely UI. Promotes separation of concerns. |
| What are atomic design principles in React? | UI components are broken into atoms (e.g., buttons), molecules (forms), organisms (layouts), templates, and pages. |
| How do you handle micro-frontends in React? | Use module federation, Webpack 5, or frameworks like Single-SPA for isolated deployment and runtime integration. |
| Why use TypeScript with React? | Enables static typing, better developer experience, and easier refactoring through type safety. |
| How do you secure a React application? | Protect routes with auth guards, sanitize user input, use HTTPS, avoid exposing secrets, and apply CORS & CSRF protections. |