react/no-unused-prop-types no working when use `{...this.state}`

Repository metrics

Stars

8,630 stars (8,630 stars)

PR merge metrics

No merged PRs in 30d (No merged PRs in 30d)

Description

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  static propTypes = {
    bar: PropTypes.string.isRequired,
  };

  state = {
    style: { color: 'red' },
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          // when I add `{...this.state}`, the rule is no working
          <h1 className="App-title" {...this.state} >Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

{
  "extends": "react-app",
  "rules": {
    "react/no-unused-prop-types": [
      "error",
      {
        "customValidators": [],
        "skipShapeProps": true
      }
    ]
  }
}

Contributor guide

Research direction

Investigate why the rule 'react/no unused prop types' fails to report unused props when using `{...this.state}` in JSX. Examine the rule's implementation for detecting prop usage, particularly how it handles spread attributes. Look at the AST traversal logic to see if spread expressions referencing state are ignored. Consider updating the rule to treat spreads from state as potentially using props, or add an option to ignore such cases. Check existing tests for similar spread patterns and add a failing test for this case.

Tech stack

javascriptreact

Domain

frontendtooling

Issue type

Bug

DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.

2

Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.

1-3 hours

Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.

Active

ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.

Clear

Prerequisites

JavaScriptReactESLint

Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.

75