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

Description

Enforces destructuring assignment for component props and context.

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

Description

Examples

Failing

Passing

Implementation

Further Reading

On this page