REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS

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'],
}