| Question |
Answer |
| What is the difference between React.StrictMode and React.Fragment? | StrictMode is used for highlighting potential problems in development, while Fragment is used to group elements without adding extra DOM nodes. |
| How do you implement lazy loading for routes in React? | Use React.lazy and Suspense to dynamically load route components when they are needed. |
| What is the purpose of React's Profiler API? | The Profiler API measures the performance of React components and identifies bottlenecks in rendering. |
| How do you handle deep state updates in React? | Use immutability helpers like immer or libraries like Redux to manage and update deeply nested state. |
| What is the difference between useEffect dependencies and useMemo dependencies? | useEffect dependencies control when the effect runs, while useMemo |
| How does React's concurrent rendering improve performance? | Concurrent rendering allows React to interrupt rendering to prioritize high-priority updates, improving responsiveness and user experience. |
| What is the difference between useSyncExternalStore and useState? | useSyncExternalStore is used for subscribing to external stores (e.g., Redux), while useState is for managing local component state. |
| How do you implement a virtualized list in React? | Use libraries like react-window or react-virtualized to render only visible items in a list, improving performance for large datasets. |
| What is React's useInsertionEffect hook, and when should it be used? | useInsertionEffect is used for injecting styles into the DOM before rendering, ensuring styles are applied immediately. |
| How do you handle hydration mismatches in server-side rendering? | Ensure the server-rendered HTML matches the client-side React tree by avoiding non-deterministic code (e.g., random values or Date.now()). |
| What is the purpose of React's unstable_batchedUpdates API? | unstable_batchedUpdates forces React to batch multiple state updates into a single render, improving performance in non-React event handlers. |
| How do you implement a portal in React? | Use ReactDOM.createPortal to render children into a DOM node outside the parent component's hierarchy. |
| What is the difference between useEffect and useInsertionEffect? | useEffect runs after rendering, while useInsertionEffect runs before rendering to inject styles or perform DOM mutations. |
| How do you optimize React applications for large-scale data fetching? | Use libraries like react-query or SWR for caching, deduplication, and efficient data fetching. |
| What is the purpose of React's useMutableSource hook? | useMutableSource is used to read from a mutable external source while ensuring consistency with React's rendering. |
