Rules
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-assignmentDescription
Enforces destructuring assignment for component props and context.
Examples
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>;
}