Return value of a React lifecycle method should be a valid type

  • BAD_REACT_API_RETURN_VALUE
  • Error
  • Medium
  • react

This rule applies when the return value of a React lifecycle method is invalid.

If an invalid value is returned from a React lifecycle method, it may cause a problem when React uses the value. Even when no immediate problem occurs, the value becomes meaningless.

The lifecycle methods which cause problem for an invalid return value are listed below with the valid return values:

  1. render(): React element, null, or false
  2. shouldComponentUpdate(): falsy value or truthy value except undefined
  3. getInitialState(): Object or null

In the above cases, since a specific value should be returned, it might be a programmer's mistake returning a wrong value or forgetting a return statement. React throws an error in render() case and outputs a warning message in the other cases.

Also, this rule checks the following lifecycle methods which need no return value:

  1. componentWillMount()
  2. componentDidMount()
  3. componentWillReceiveProps()
  4. componentWillUpdate()
  5. componentDidUpdate()
  6. componentWillUnmount()

In the above cases, returning a value has no effect.

Noncompliant Code Example

// Example 1
import React from 'react';

class Hello extends React.Component {
    render() {
        <div>Hello</div>; // BAD_REACT_API_RETURN_VALUE alarm because 'render()' does not return this React element.
    }
}

// Example 2
class Hello2 extends React.Component {
    render() {
        if (!this.props.myProp) {
            return true; // BAD_REACT_API_RETURN_VALUE alarm because 'render()' should return only a React element, null, or false.
        }
        return <div>Hello {this.props.myProp}</div>;
    }
}

// Example 3
class Hello3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { greetName: 'Hi' };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ greetName: 'Bye' });
    }
    render() {
        return <div onClick={this.handleClick}>{this.state.greetName}</div>;
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.greetName === this.state.greetName) {
            return false;
        }
        // BAD_REACT_API_RETURN_VALUE alarm because 'shouldComponentUpdate()' should return a boolean value, but returning 'true' is missing in this path, so 'greetName' will not be updated.
    }
}

Compliant Code Example

// Example 1
import React from 'react';

class Hello extends React.Component {
    render() {
        return (
            <div>Hello</div>
        );
    }
}

// Example 2
class Hello2 extends React.Component {
    render() {
        if (!this.props.myProp) {
            return false;
        }
        return <div>Hello {this.props.myProp}</div>;
    }
}

// Example 3
class Hello3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { greetName: 'Hi' };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState({ greetName: 'Bye' });
    }
    render() {
        return <div onClick={this.handleClick}>{this.state.greetName}</div>;
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.greetName === this.state.greetName) {
            return false;
        }
        return true;
    }
}

Version

This rule was introduced in DeepScan 1.4.0-beta.

See

  • React.Component methods

  • React Error: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.