destructuring-assignment.md

Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment)

🔧 This rule is automatically fixable by the --fix CLI option.

Rule can be set to either of always or never;

"react/destructuring-assignment": [<enabled>, 'always']

Rule Details

By default rule is set to always enforce destructuring assignment. Examples of incorrect code for this rule:

const MyComponent = (props) => {
  return (<div id={props.id} />)
};

const Foo = class extends React.PureComponent {
  render() {
    return <div>{this.context.foo}</div>;
  }
};

Below pattern is correct:

const MyComponent = ({id}) => {
  return (<div id={id} />)
};

const MyComponent = (props, context) => {
  const { id } = props;
  return (<div id={id} />)
};

const Foo = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return <div>{title}</div>;
  }
};

Examples of incorrect code for this rule, when configured with "never":

const MyComponent = ({id}) => {
  return (<div id={id} />)
};

const MyComponent = (props) => {
  const { id } = props;
  return (<div id={id} />)
};

const Foo = class extends React.PureComponent {
  render() {
    const { title } = this.state;
    return <div>{title}</div>;
  }
};

and below pattern is correct:

const MyComponent = (props) => {
  return (<div id={props.id} />)
};

const Foo = class extends React.PureComponent {
  render() {
    return <div>{this.state.title}</div>;
  }
};

Rule Options

...
"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean>, "destructureInSignature": "always" | "ignore" }]
...

ignoreClassFields

When configured with true, the rule will ignore class field declarations. Examples of correct code for this rule:

class Foo extends React.PureComponent {
  bar = this.props.bar
}

destructureInSignature (default: "ignore")

This option can be one of always or ignore. When configured with always, the rule will require props destructuring happens in the function signature.

Examples of incorrect code for destructureInSignature: 'always' :

function Foo(props) {
  const {a} = props;
  return <>{a}</>
}

Examples of correct code for destructureInSignature: 'always' :

function Foo({a}) {
  return <>{a}</>
}

// Ignores when props is used elsewhere
function Foo(props) {
  const {a} = props;
  useProps(props); // NOTE: it is a bad practice to pass the props object anywhere else!
  return <Goo a={a}/>
}