How do you avoid creating new objects and references (Inline Objects & Arrays) in a component body during Render?

Short answer

Define constants outside the component function if they do not depend on Props, or use useMemo to keep the same reference for objects that depend on props and are passed to child components.

Explanation

Every render creates new references for objects and arrays defined inside the component (such as style={{ margin: 10 }} or options={["a", "b"]}). Object.is sees the new reference, causing memoized child components to re-render unnecessarily.

Code example

// Stable constants defined completely outside the component scope
const DEFAULT_OPTIONS = ['All', 'Enabled', 'Disabled'];

function FilterBar({ onSelect }: { onSelect: (val: string) => void }) {
  // Use the shared external constant
  return <OptionsList items={DEFAULT_OPTIONS} onSelect={onSelect} />;
}

Common mistakes

• Passing inline objects as props to repeated components inside map loops.

Follow-up questions

• What does React.memo cost, and why should you not use it by default on every component?

Sources

• React docs — useMemo
• React docs — memo