When is it appropriate to wrap a component in React.memo?

When is it appropriate to wrap a component in React.memo?

• A. When the component is a class component.
• B. When the component uses local state that changes frequently.
• C. When the component is pure and expensive to render, and its props frequently stay the same.
• D. When the component is pure and cheap to render.

Answer: (C)

The idea being tested is using memoization to avoid unnecessary work in rendering. React.memo wraps a functional component and tells React to skip re-rendering that component if its props haven’t changed (based on a shallow comparison). This is most beneficial when the component’s output is determined purely by its props (it’s pure), rendering that output is expensive, and those props don’t change often. In that situation, the parent might re-render frequently, but if the child’s props stay the same, memoization lets React reuse the previous render instead of recomputing it. Keep in mind that memo only looks at props. If the component relies on its own state or context, or if those values change, the component will still re-render, so the benefit of memoization is reduced. It’s also not needed for cheap-to-render components, where the overhead of doing the prop check isn’t worth it. And since React.memo performs a shallow comparison, passing new object or array props every render will negate the benefit unless you stabilize those references (for example, with useMemo or by structuring props carefully). For functional components, this pattern is the right fit when the component is pure, expensive to render, and its props stay the same often.

The idea being tested is using memoization to avoid unnecessary work in rendering. React.memo wraps a functional component and tells React to skip re-rendering that component if its props haven’t changed (based on a shallow comparison). This is most beneficial when the component’s output is determined purely by its props (it’s pure), rendering that output is expensive, and those props don’t change often. In that situation, the parent might re-render frequently, but if the child’s props stay the same, memoization lets React reuse the previous render instead of recomputing it.

Keep in mind that memo only looks at props. If the component relies on its own state or context, or if those values change, the component will still re-render, so the benefit of memoization is reduced. It’s also not needed for cheap-to-render components, where the overhead of doing the prop check isn’t worth it. And since React.memo performs a shallow comparison, passing new object or array props every render will negate the benefit unless you stabilize those references (for example, with useMemo or by structuring props carefully). For functional components, this pattern is the right fit when the component is pure, expensive to render, and its props stay the same often.