Which is a common React performance anti-pattern?

Which is a common React performance anti-pattern?

• A. Using memoization for heavy computations
• B. Splitting large components into smaller ones
• C. Inline arrow functions and object literals in render
• D. Avoiding state updates.

Answer: (C)

Creating new functions or objects inside the render path is a common performance pitfall. When you return JSX, any inline arrow function or inline object literal you use gets a fresh reference each time. If you pass these new references as props to child components that rely on shallow prop comparisons (like those wrapped in React.memo) or as dependencies to effects, React will see a change and re-render those children—even if the underlying data didn’t change. This can cascade into many unnecessary renders and extra work. The fix is to keep function and object references stable: define handlers outside render or wrap them with useCallback, and memoize derived values or objects with useMemo (or move them to state or refs). In contrast, memoizing heavy computations, splitting large components into smaller ones, and updating state only when needed are practices that generally support better performance and maintainability.

Creating new functions or objects inside the render path is a common performance pitfall. When you return JSX, any inline arrow function or inline object literal you use gets a fresh reference each time. If you pass these new references as props to child components that rely on shallow prop comparisons (like those wrapped in React.memo) or as dependencies to effects, React will see a change and re-render those children—even if the underlying data didn’t change. This can cascade into many unnecessary renders and extra work. The fix is to keep function and object references stable: define handlers outside render or wrap them with useCallback, and memoize derived values or objects with useMemo (or move them to state or refs). In contrast, memoizing heavy computations, splitting large components into smaller ones, and updating state only when needed are practices that generally support better performance and maintainability.