no-object-type-as-default-prop

Keywords: React, defaultProps, object, reference equality, re-renders, performance, ESLint rule, LLM-optimized

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

Quick Summary

Aspect	Details
Severity	Warning (performance)
Auto-Fix	❌ No (requires extraction)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React components with object defaults

Rule Details

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

Why This Matters

Issue	Impact	Solution
🔄 New reference each render	Breaks React.memo/PureComponent	Extract to constant
🐛 Performance	Unnecessary child re-renders	Use factory function
🔍 Memoization failure	useMemo/useCallback ineffective	Stable reference outside

Examples

❌ Incorrect

// 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} />;
}

// Class component version
class UserCard extends React.Component {
  static defaultProps = {
    style: { padding: 10 },          // Still problematic
    items: []
  };
}

✅ Correct

// 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 Examples

Basic Usage

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

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

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.