CodeQL documentation
CodeQL resources

Unused or undefined state property

ID: js/react/unused-or-undefined-state-property
Kind: problem
Security severity: 
Severity: warning
Precision: high
Tags:
   - correctness
   - reliability
   - frameworks/react
Query suites:
   - javascript-security-and-quality.qls

Click to see the query in the CodeQL repository

Unused or undefined React component state properties can cause errors or make code hard to read and understand. Any computation used to initialize an unused state property is wasted, which may lead to performance problems. Any access to an undefined component state property trivially evaluates to the value undefined, which may come as a surprise.

Recommendation

Remove unused component state properties. Assign values to undefined component state properties.

Example

In the code below, the React component Clock attempts to display the current time in the render method.

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
    }

    render() {
         // BAD: this.state.date is undefined
        var now = this.state.date.toLocaleTimeString();
        return (
                <div>
                <h2>The time is {now}.</h2>
                </div>
        );
    }
}

But since there are no assignments to this.state.date, the render method will throw an exception when attempting to access the property toLocaleString of the value undefined. To avoid this exception, assign the date property before using it:

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }

    render() {
         // GOOD: this.state.date is defined above
        var now = this.state.date.toLocaleTimeString()
        return (
                <div>
                <h2>The time is {now}.</h2>
                </div>
        );
    }
}

References

  • © GitHub, Inc.
  • Terms
  • Privacy