Advanced React interview questions with answers

Question: What are the differences between controlled and uncontrolled components in React?

• Answer: Controlled components rely on React state to manage form data, where form elements are controlled by React and state is updated through event handlers. Uncontrolled components allow form elements to manage their own state internally, usually through refs, without relying on React state.

Question: How does React handle lifecycle methods in functional components prior to the introduction of hooks?

• Answer: Prior to hooks, functional components didn't have lifecycle methods. However, with the introduction of hooks, functional components can now use useEffect to replicate lifecycle behavior. useEffect with an empty dependency array ([]) acts like componentDidMount.

Question: Explain the concept of "reconciliation" in React and its significance.

• Answer: Reconciliation is the process through which React updates the DOM in response to changes in state or props. React compares the virtual DOM with the previous version and determines the minimal set of changes needed to update the actual DOM. It's crucial for React's performance optimization.

Question: What are React Portals and why are they useful?

• Answer: React Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component. This is useful for scenarios like modals or tooltips, where the content needs to break out of the usual DOM tree structure for styling or positioning reasons.

Question: Explain the concept of context in React and when would you use it?

• Answer: Context provides a way to pass data through the component tree without having to pass props down manually at every level. It's useful when data needs to be accessible to many components at different nesting levels, like theme information or user authentication status.

Question: How does React handle code splitting and lazy loading?

• Answer: React.lazy and Suspense are used for code splitting and lazy loading. React.lazy allows you to dynamically import a component, and Suspense lets you specify a fallback UI while the component is loading. This improves the initial load time and reduces the size of the bundle.

Question: What is the Virtual DOM and how does it contribute to React's performance?

• Answer: The Virtual DOM is a lightweight copy of the actual DOM. React uses it to perform efficient updates by first making changes to the Virtual DOM and then calculating the minimal set of changes needed to update the real DOM. This reduces the number of actual DOM manipulations, improving performance.

Question: Describe the differences between shallow rendering and full DOM rendering in testing React components.

• Answer: Shallow rendering renders only the component itself without its children, allowing you to test a component in isolation. Full DOM rendering renders the entire component tree, including child components, providing a more realistic testing environment but potentially slower tests.

Question: How does React Router handle nested routes and why is it useful?

• Answer: React Router allows you to define nested routes by nesting Route components within each other. This is useful for building complex UIs with multiple levels of navigation. Nested routes enable better organization of code and logical separation of concerns.

Question: What are some common performance optimization techniques in React?

• Answer: Performance optimization techniques in React include using shouldComponentUpdate or PureComponent for preventing unnecessary re-renders, implementing memoization with useMemo or useCallback, code splitting and lazy loading, using keys correctly to help React identify list items, and minimizing the use of inline functions in render methods to prevent unnecessary re-renders.