Performance Optimization

Question 1

What does useMemo do?

Accepted Answer

useMemo is a hook that memoizes the result of an expensive calculation. It only recomputes the value when one of its dependencies changes, avoiding unnecessary work on every render.

Question 2

What does useCallback do?

Accepted Answer

useCallback is a hook that returns a memoized version of a callback function. The function identity is preserved between renders unless its dependencies change, which is useful when passing callbacks to optimized child components.

Question 3

What is the difference between useMemo and useCallback?

Accepted Answer

useMemo memoizes the result of a function call, returning a cached value. useCallback memoizes the function itself, returning the same function reference between renders. useCallback with a function is equivalent to useMemo returning that function.

Question 4

What is React.memo?

Accepted Answer

React.memo is a higher-order component that memoizes a functional component. React skips re-rendering the component when its props have not changed, which can improve performance for expensive components that receive the same props often.

Question 5

What is PureComponent?

Accepted Answer

PureComponent is a class component base that implements shouldComponentUpdate with a shallow comparison of props and state. It re-renders only when a shallow check detects changes, similar to React.memo for class components.

Question 6

What is shouldComponentUpdate?

Accepted Answer

shouldComponentUpdate is a class lifecycle method that receives the next props and state. Returning false tells React to skip the re-render. It is used to optimize performance by avoiding unnecessary updates.

Question 7

How can you optimize a large list rendering in React?

Accepted Answer

Techniques include virtualization with libraries like react-window, memoizing list items with React.memo, using stable keys, moving expensive computations into useMemo, and avoiding new object or function props on every render.

Question 8

What is windowing or list virtualization?

Accepted Answer

Windowing is a technique where only the items currently visible in the viewport are rendered, plus a small buffer. As the user scrolls, items are mounted and unmounted. This dramatically improves performance for lists with thousands of items.

Question 9

What is batching in React?

Accepted Answer

Batching is the process of grouping multiple state updates into a single re-render for better performance. React 18 introduced automatic batching everywhere, including inside promises, timeouts, and native event handlers.

Question 10

What is the key difference between React 17 and React 18 batching?

Accepted Answer

In React 17, updates were only batched inside React event handlers. React 18 introduced automatic batching for all updates, including those inside setTimeout, promises, and native event handlers, leading to fewer re-renders.

---