| Question |
Answer |
| What is the difference between useState and useReducer? | useState is simpler for local state; useReducer is better for complex state logic or multiple actions. |
| How do you implement infinite scrolling in React? | Use intersection observers or libraries like react-infinite-scroll-component to load more data dynamically. |
| What is the difference between Context and Redux? | Context is simpler for static global values; Redux is better for complex state management with middleware and dev tools. |
| How do you handle component-level caching in React? | Use useMemo for memoizing expensive calculations, and libraries like SWR or React Query for data caching. |
| What is the difference between React.lazy and React.Suspense? | React.lazy dynamically imports components; React.Suspense provides fallback UI while lazy components load. |
| What is the difference between useTransition and useDeferredValue? | useTransition defers state updates for low-priority tasks, while useDeferredValue defers a value until higher-priority updates are complete. |
| How do you handle WebSocket connections in React? | Use useEffect to establish and clean up WebSocket connections, and manage state for incoming messages. |
| What is the difference between StrictMode and Profiler in React? | StrictMode highlights potential problems in an app, while Profiler measures performance and identifies bottlenecks. |
| How do you implement optimistic updates in React? | Update the UI immediately after an action, then reconcile with the server response. Rollback if the server returns an error. |
| What is the difference between forwardRef and useRef? | forwardRef passes refs to child components, while useRef creates a reference to a DOM element or value in the same component. |
| How do you handle file uploads in React? | Use controlled components for file inputs, and libraries like Axios or Fetch API to send files to the server. |
| What is the difference between useEffect cleanup and componentWillUnmount? | Both handle cleanup, but useEffect cleanup is specific to functional components, while componentWillUnmount is for class components. |
| How do you implement drag-and-drop functionality in React? | Use libraries like react-dnd or react-beautiful-dnd, or handle native drag-and-drop events (onDragStart, onDrop). |
| What is the difference between key and ref in React? | key helps React identify elements for reconciliation, while ref provides access to DOM elements or component instances. |
| How do you handle animations in React? | Use libraries like react-spring, framer-motion, or CSS transitions/animations with className toggling. |
