| Question |
Answer |
| How do you implement suspense for data fetching in React? | Use React.Suspense with a data-fetching library like react-query or Relay to handle asynchronous data loading. |
| What is the difference between React.lazy and dynamic imports? | React.lazy is a wrapper around dynamic imports that integrates with React's Suspense for lazy loading components. |
| How do you handle memory leaks in React applications? | Use cleanup functions in useEffect, avoid retaining references to unmounted components, and use tools like Chrome DevTools to detect leaks. |
| What is the purpose of React's useTransition hook in concurrent mode? | useTransition allows you to mark updates as non-urgent, enabling React to prioritize rendering high-priority updates first. |
| How do you implement server-side rendering with data fetching in React? | Use frameworks like Next.js or manually fetch data on the server, pass it as props to components, and render the HTML using ReactDOMServer. |
| What are React hooks? | Hooks let you use state and lifecycle features in functional components. Examples include useState, useEffect, useMemo, and useCallback. |
| How does useMemo differ from useCallback? | useMemo memoizes values; useCallback memoizes functions. Both optimize performance. |
| When should you avoid using useEffect? | Avoid it for rendering logic; use it mainly for side effects like API calls, subscriptions, or timers. |
| What is reconciliation in React? | It's the process React uses to update the DOM efficiently when state or props change. |
| Explain the concept of React Fiber. | React Fiber is the reimplementation of the reconciliation algorithm, allowing incremental rendering and prioritization. |
| What are controlled vs uncontrolled components? | Controlled components have value managed by React via state. Uncontrolled use refs directly to DOM. |
| How do you optimize rendering performance? | Techniques include memoization, lazy loading, code splitting, and avoiding unnecessary re-renders. |
| What's the purpose of React.memo? | Higher-order component that prevents re-rendering if props haven't changed. |
| Difference between Context and Redux? | Context is good for static global values. Redux provides a full state management solution with reducers, actions, and middleware. |
| How is useRef used in performance tuning? | It holds mutable values that don’t cause re-renders, useful for storing previous state or DOM nodes. |
