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 these typos can lead to unintended behavior like the following:

  1. Calling a React method having typo can throw ReferenceError
  2. Overriding React component's lifecycle method having typo will not be called on the intended lifecycle
  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