1 min read

REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS

Prevent static imports that are referenced only in React event handlers from being eagerly loaded in React components.
Table of Contents

Conformance is available on Enterprise plans

This rule has been deprecated as of version 1.8.0and will be removed in 2.0.0.

React event handlers are async, and as such, this means we can defer loading the associated code until we interact with the UI, triggering that event handler. Specifically, this means we can improve initial code size and the overhead of loading the code until it is actually needed.

Instead of using static imports at the top of your module, you can use dynamic imports as needed in your React event handlers.

Before:

import foo from 'foo';
 
const onClick = () => {
  foo.doSomething();
};

After:

const onClick = () => {
  import('foo').then((foo) => {
    foo.doSomething();
  });
};

Additionally, you can configure the rule for only specific React event handlers:

"REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS": {
  eventAllowList: ['onClick'],
}
Last updated on June 15, 2024