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 a TypeError exception.
  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

View with compliant examples side by side
import React from 'react';
import PropTypes from 'prop-types';

export class Hello extends React.Component {
    componentWillmount() { // REACT_API_TYPO alarm because 'componentWillMount' is a correct name of the lifecycle method.
        doSomething(this.props.greetName);
    }
    render() {
        return (<div>{this.props.greetName}</div>);
    }
}

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

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';
import PropTypes from 'prop-types';

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

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

Version

This rule was introduced in DeepScan 1.3.0-beta.

See