react/sort-default-props

In a long defaultProps object, a fixed order makes props quick to find and duplicates easy to spot.

Capital letters sort before lowercase ones. After a spread, sorting starts over.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/sort-default-props" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/sort-default-props" = ["error", {
  ignoreCase = false,
}]

Reported:

function Button({ label, size }) {
  return <button className={size}>{label}</button>;
}

Button.defaultProps = {
  size: "medium",
  label: "OK",
};

Not reported:

function Button({ label, size }) {
  return <button className={size}>{label}</button>;
}

Button.defaultProps = {
  label: "OK",
  size: "medium",
};

label comes after a spread here, so it isn't compared with size:

class Button extends React.Component {
  static defaultProps = {
    size: "medium",
    ...shared,
    label: "OK",
  };
}

Option	Default	What it does
`ignoreCase`	`false`	Ignore case when comparing the keys.

By default this is reported, because I sorts before a:

Button.defaultProps = {
  ariaLabel: "",
  Icon: null,
};

With ignoreCase: true it isn't:

Button.defaultProps = {
  ariaLabel: "",
  Icon: null,
};