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 vanilla 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 event object received as a parameter.

Noncompliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <a href="http://foo.com" onClick={() => false}> {/* REACT_BAD_EVENT_HANDLER_RETURN_FALSE alarm */}
    foo.com
  </a>
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <a href="http://foo.com" onClick={event => event.preventDefault()}>
    foo.com
  </a>
);

Version

This rule was introduced in DeepScan 1.2.0-alpha.

See

• Stopping Propagation

• Preventing Default Behavior