no-object-type-as-default-prop

Prevent object types as default prop values. This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Using object literals as default prop values creates new object references on every render, breaking memoization and causing unnecessary re-renders.

Why This MattersCopy Anchor Link

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

// BAD: Object literal creates new reference every render
function UserCard({ 
  user,
  style = { padding: 10 },           // New object every render!
  options = { animate: true },        // New object every render!
  items = []                          // New array every render!
}) {
  return <Card style={style} options={options} items={items} />;
}

The rule reports an object, array or function literal used as the default of a destructured prop of a function component (a PascalCase function that returns JSX, or a function passed to React's memo / forwardRef). A class's static defaultProps is evaluated once, when the class is defined, so it is not reported; neither is a default in a function that is not a component.

✅ CorrectCopy Anchor Link

// GOOD: Constants defined outside component
const DEFAULT_STYLE = { padding: 10 };
const DEFAULT_OPTIONS = { animate: true };
const EMPTY_ARRAY = [];

function UserCard({ 
  user,
  style = DEFAULT_STYLE,
  options = DEFAULT_OPTIONS,
  items = EMPTY_ARRAY
}) {
  return <Card style={style} options={options} items={items} />;
}

// Or use a factory pattern for truly dynamic defaults
function UserCard({ user, style, options }) {
  const mergedStyle = useMemo(
    () => ({ ...DEFAULT_STYLE, ...style }),
    [style]
  );
  
  return <Card style={mergedStyle} options={options} />;
}

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-object-type-as-default-prop': 'warn'
  }
}

Related RulesCopy Anchor Link

• react-render-optimization - Render performance
• no-unnecessary-rerenders - Re-render prevention

Further ReadingCopy Anchor Link

• Default Props - React docs
• Reference Equality - Memoization patterns

Known False NegativesCopy Anchor Link

• Other fresh values: new Map(), a regular expression literal or a class expression as a default also create a new value per render and are not reported.
• Components the rule does not recognise: a function wrapped by a higher-order function other than React's memo / forwardRef, or one that returns JSX only through a helper call.

Not reported by design: a class's static defaultProps (evaluated once, when the class is defined) and defaults in functions that are not components.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-object-type-as-default-prop": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-object-type-as-default-prop': 'error',    },  },});