default-props-match-prop-types

Keywords: React, defaultProps, propTypes, validation, type safety, ESLint rule, LLM-optimized

Validate that default props match their corresponding prop types. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (type safety)
Auto-Fix	❌ No (requires manual review)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React class components with PropTypes

Rule Details

Ensures that default prop values match the expected types defined in propTypes. Mismatched types can cause runtime errors or unexpected behavior.

Why This Matters

Issue	Impact	Solution
🔄 Type mismatch	Runtime errors	Match default to propType
🐛 Silent failures	Unexpected component behavior	Validate default values
🔍 Debug difficulty	Hard to trace type issues	Proper type alignment

Examples

❌ Incorrect

class UserCard extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    count: PropTypes.number,
  };
  
  static defaultProps = {
    name: 42,        // Default is number, but propType is string!
    count: "zero",   // Default is string, but propType is number!
  };
}

✅ Correct

class UserCard extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    count: PropTypes.number,
  };
  
  static defaultProps = {
    name: "Guest",   // String matches string propType
    count: 0,        // Number matches number propType
  };
}

// Better: Use TypeScript for static type checking
interface Props {
  name?: string;
  count?: number;
}

function UserCard({ name = "Guest", count = 0 }: Props) {
  return <div>{name}: {count}</div>;
}

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/default-props-match-prop-types': 'warn'
  }
}

prop-types - Enforce prop types usage
require-default-props - Require default props

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.

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.