react/prefer-destructuring-assignment

Rule category

Style.

Enforces the use of destructuring assignment over property assignment.

Usually we don’t need the whole props object itself, so it’s better to destructure it into individual props.

It also helps with code readability and maintainability.

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>;
}