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

Features

🔍

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 MyComponentProps {
  items: string[];
}
 
function MyComponent(props: MyComponentProps) {
  const items = props.items;
  //            ^^^^^^^^^^^
  //            - Use destructuring assignment for props.
 
  return <div>{items}</div>;
}

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

Passing

import React from "react";
 
interface MyComponentProps {
  items: string[];
}
 
function MyComponent(props: MyComponentProps) {
  const { items } = props;
 
  return <div>{items}</div>;
}

import React from "react";
 
interface MyComponentProps {
  items: string[];
}
 
function MyComponent({ items }: MyComponentProps) {
  return <div>{items}</div>;
}

import React from "react";
 
interface MyComponentProps {
  items: string[];
}
 
function MyComponent({ items, ...rest }: MyComponentProps) {
  return <div {...rest}>{items}</div>;
}

prefer-destructuring-assignment

What it does

Examples

Failing

Passing

Implementation

Further Reading