prefer-destructuring-assignment

Full Name in eslint-plugin-react-x

react-x/prefer-destructuring-assignment

Full Name in @eslint-react/eslint-plugin

@eslint-react/prefer-destructuring-assignment

Presets

strict strict-typescript strict-type-checked

Rule Details

Destructuring assignment makes it immediately clear which props a component uses. It also encourages better code organization and makes components easier to read and maintain.

Common Violations

Invalid

interface MyComponentProps {
  items: string[];
}

function MyComponent(props: MyComponentProps) {
  const items = props.items;
  //            ^^^ Use destructuring assignment for component props.

  return <div>{items}</div>;
}

interface MyComponentProps {
  items: string[];
}

function MyComponent(props: MyComponentProps) {
  return <div>{props.items}</div>;
  //           ^^^ Use destructuring assignment for component props.
}

Valid

interface MyComponentProps {
  items: string[];
}

function MyComponent(props: MyComponentProps) {
  const { items } = props;

  return <div>{items}</div>;
}

interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items}</div>;
}

interface MyComponentProps {
  items: string[];
}

function MyComponent({ items, ...rest }: MyComponentProps) {
  return <div {...rest}>{items}</div>;
}

prefer-destructuring-assignment

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page