| Question |
Answer |
| What is the purpose of React's useMemo hook? | useMemo is used to memoize expensive calculations, preventing unnecessary re-computation on re-renders. |
| How does React's reconciliation process work? | React uses a virtual DOM and compares it with the real DOM to determine the minimal set of changes needed, using a process called "diffing." |
| What is the difference between useEffect and useLayoutEffect? | useEffect runs after the DOM has been painted, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. |
| How do you optimize performance in a large React application? | Use techniques like code splitting, lazy loading, memoization (React.memo), and avoiding unnecessary re-renders with shouldComponentUpdate or React.PureComponent. |
| What is the purpose of React's Context API? | The Context API allows you to share state and data across components without passing props down manually at every level. |
| How does React handle state updates in functional components? | React uses the useState hook to manage state in functional components. State updates are asynchronous and batched for performance. |
| What is the difference between controlled and uncontrolled components in React? | Controlled components have their state managed by React, while uncontrolled components manage their state internally using refs. |
| How does React's Suspense work? | Suspense is used to handle asynchronous rendering, allowing components to "wait" for data to load before rendering. |
| What is the purpose of React's ErrorBoundary? | ErrorBoundary is a component that catches JavaScript errors in its child component tree and displays a fallback UI instead of crashing the app. |
| How do you implement server-side rendering (SSR) in React? | Use frameworks like Next.js or libraries like ReactDOMServer to render React components on the server and send HTML to the client. |
| What is the difference between React.memo and React.PureComponent? | React.memo is used for functional components to prevent unnecessary re-renders, while React.PureComponent is used for class components. |
| How do you manage side effects in React applications? | Use hooks like useEffect for functional components or lifecycle methods like componentDidMount and componentDidUpdate in class components. |
| What is the purpose of the key prop in React? | The key prop helps React identify which items have changed, been added, or removed in a list, improving rendering performance. |
| How do you handle forms in React? | Use controlled components with onChange handlers or libraries like Formik or React Hook Form for more complex forms. |
| What is the difference between useReducer and useState? | useState is used for simple state management, while useReducer is better suited for managing complex state logic with multiple actions. |
