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

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 February 22, 2024