⚛️ React Interview Questions

The Virtual DOM is a lightweight JavaScript representation of the actual DOM. React uses it to optimize rendering performance through a process called "reconciliation."

• Virtual DOM Creation: React creates a virtual representation of the UI in memory
• Diffing: When state changes, React creates a new virtual DOM and compares it with the previous one
• Reconciliation: Only the differences are applied to the real DOM
• Batching: Multiple updates are batched together for efficiency

Both hooks manage state, but useReducer is preferable for complex state logic involving multiple sub-values or when the next state depends on the previous one.

useEffect handles side effects in functional components. The cleanup function runs before the component unmounts and before each re-run of the effect.

useMemo caches computed values, while useCallback caches function references. Both prevent unnecessary recalculations and re-renders.

Context API provides a way to pass data through the component tree without manually passing props at every level. It solves the "prop drilling" problem.

Reconciliation is React's algorithm for diffing two trees and determining which parts need to be updated. Keys help React identify which items have changed, been added, or removed.

React Server Components (RSC) render on the server with zero JavaScript sent to the client. They can directly access backend resources and reduce bundle size.

Controlled components store form data in React state.Uncontrolled components let the DOM handle form data, accessed via refs.

Custom Hooks are reusable functions that encapsulate stateful logic. They must start with "use" and can call other hooks.

React.memo is a higher-order component that memoizes the rendered output, preventing unnecessary re-renders when props haven't changed.

useRef returns a mutable ref object that persists across renders. It's commonly used for DOM access and storing mutable values without causing re-renders.

Suspense lets components "wait" for something before rendering. Combined withReact.lazy, it enables code splitting to reduce initial bundle size.

React 18 introduced concurrent rendering, allowing React to prepare multiple versions of the UI at the same time without blocking the main thread.

React uses SyntheticEvent, a cross-browser wrapper around the browser's native event. Events are delegated to the root element for performance.

Error Boundaries are React components that catch JavaScript errors in their child component tree, log errors, and display a fallback UI. They must be class components.

Prop drilling is passing props through multiple component levels to reach a deeply nested component. It can be avoided using Context API, state management libraries, or component composition.

Class components use ES6 classes with lifecycle methods, while functional components are simpler functions that use hooks for state and side effects. Functional components are now preferred.

Infinite scrolling loads more content as the user scrolls. It can be implemented using Intersection Observer API, scroll events, or libraries like react-infinite-scroll.

React performance optimization involves reducing unnecessary re-renders, code splitting, memoization, and efficient state management.

HOCs and render props are patterns for sharing logic between components. While still valid, custom hooks have largely replaced these patterns in modern React.