# Enforce consistent usage of destructuring assignment of props, state, and context (`reblend/destructuring-assignment`)

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

Rule can be set to either of `always` or `never`;

```js
"reblend/destructuring-assignment": [<enabled>, 'always']
```

## Rule Details

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

```js
const MyComponent = props => {
  return <div id={props.id} />;
};
```

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

Below pattern is correct:

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

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

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

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

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

```js
const MyComponent = props => {
  const { id } = props;
  return <div id={id} />;
};
```

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

and below pattern is correct:

```js
const MyComponent = props => {
  return <div id={props.id} />;
};
```

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

## Rule Options

```js
...
"reblend/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:

```jsx
class Foo extends Reblend.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'` :

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

Examples of **correct** code for `destructureInSignature: 'always'` :

```jsx
function Foo({ a }) {
  return <>{a}</>;
}
```

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