prefer-destructuring-assignment
Full Name in eslint-plugin-react-x
react-x/prefer-destructuring-assignmentFull Name in @eslint-react/eslint-plugin
@eslint-react/prefer-destructuring-assignmentFeatures
🔍
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>;
}