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:

Calling a React method having typo can throw a TypeError exception.
Overriding React component's lifecycle method having typo will not be called on the intended lifecycle.
If React component's propTypes property has typo, type checking of the component's props can be missed.

-Noncompliant Code Example
+Compliant Code Example
 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.
+    componentWillMount() {
         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.
+Hello.propTypes = {
     greetName: PropTypes.string
 };

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
};

React's APIs should not have typo

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?