React's APIs should not have typo

  • REACT_API_TYPO
  • Error
  • Medium
  • react

This rule applies when React's APIs have typo.

React's APIs usually have long and complicated names which typos can be easily made, and in this case the following unlikely intents could occur:

  1. Calling a React method having typo can throw ReferenceError
  2. Overriding React component's lifecycle method having typo can make its intent miss at the particular time
  3. If React component's propTypes property has typo, type checking of the component's props can be missed

Noncompliant Code Example

import React from 'react';
import PropTypes from 'prop-types';

class Hello extends React.Component {
    componentWillmount() { // REACT_API_TYPO alarm because `componentWillMount` is a correct name of the lifecycle method.
        this.state = {
            greetName: this.props.greetName
        };
    }
    render() {
        return (<div>{this.state.greetName}</div>); // TypeError: Cannot read property 'greetName' of null
    }
}

Hello.PropTypes = { // REACT_API_TYPO alarm because `propTypes` is a correct name of the component's class. (ReferenceError: PropTypes is not defined)
    greetName: PropTypes.string
};

Compliant Code Example

import React from 'react';
import PropTypes from 'prop-types';

class Hello extends React.Component {
    componentWillMount() {
        this.state = {
            greetName: this.props.greetName
        };
    }
    render() {
        return (<div>{this.state.greetName}</div>);
    }
}

Hello.propTypes = {
    greetName: PropTypes.string
};

Version

This rule was introduced in DeepScan 1.3.0-beta.

See