DocumentationRulesprefer-destructuring-assignment

prefer-destructuring-assignment

Rule category

Style.

What it does

Enforces the use of destructuring assignment over property assignment.

Examples

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

Failing

import React from "react";
 
interface ExampleProps {
  items: string[];
}
 
function Example(props: ExampleProps) {
  const items = props.items;
  //            ^^^^^^^^^^^
  //            - Use destructuring assignment for props.
 
  return <div>{items}</div>;
}
import React from "react";
 
interface ExampleProps {
  items: string[];
}
 
function Example(props: ExampleProps) {
  return <div>{props.items}</div>;
  //           ^^^^^^^^^^^
  //           - Use destructuring assignment for props.
}

Passing

import React from "react";
 
interface ExampleProps {
  items: string[];
}
 
function Example(props: ExampleProps) {
  const { items } = props;
 
  return <div>{items}</div>;
}
import React from "react";
 
interface ExampleProps {
  items: string[];
}
 
function Example({ items }: ExampleProps) {
  return <div>{items}</div>;
}
import React from "react";
 
interface ExampleProps {
  items: string[];
}
 
function Example({ items, ...rest }: ExampleProps) {
  return <div {...rest}>{items}</div>;
}

Further Reading