react/prefer-destructuring-assignment

Rule category

Style.

Enforces the use of destructuring assignment over property assignment.

This rule aims to enforce the use of destructuring assignment over property assignment.

function Component(props) {
  const items = props.items;
 
  return <div>{items}</div>;
}

function Component(props) {
  return <div>{props.items}</div>;
}

function Component(props) {
  const { items } = props;
 
  return <div>{items}</div>;
}

function Component(props) {
  const { items } = props;
 
  return <div>{items}</div>;
}

function Component({ items }) {
  return <div>{items}</div>;
}

function Component({ items }: { items: string[] }) {
  return <div>{items}</div>;
}

function Component({ items, ...rest }) {
  return <div {...rest}>{items}</div>;
}