return false should not be used in a React event handler

  • REACT_BAD_EVENT_HANDLER_RETURN_FALSE
  • Error
  • Medium
  • react

This rule applies when the return value of a React event handler is false.

Unlike HTML, returning false from an event handler does not prevent event propagation or default behavior in React. Instead, stopPropagation() or 'preventDefault()` should be explicitly called on the React event object received as a parameter.

Noncompliant Code Example

import React from 'react';

class Hello extends React.Component {
    render() {
        return (
            <a href="http://foo.com" onClick={event => false}> {/* REACT_BAD_EVENT_HANDLER_RETURN_FALSE alarm */}
                foo.com
            </a>
        );
    }
}

Compliant Code Example

import React from 'react';

class Hello extends React.Component {
    render() {
        return (
            <a href="http://foo.com" onClick={event => event.preventDefault()}>
                foo.com
            </a>
        );
    }
}

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See