---
title: REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS
product: vercel
url: /docs/conformance/rules/REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS
type: conceptual
prerequisites:
  []
related:
  - /docs/conformance/customize
summary: Prevent static imports that are referenced only in React event handlers from being eagerly loaded in React components.
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

# REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS

> **🔒 Permissions Required**: Conformance

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.

## How to fix

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

Before:

```js
import foo from 'foo';

const onClick = () => {
  foo.doSomething();
};
```

After:

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

Additionally, you can [configure](/docs/conformance/customize) the rule for only specific React event handlers:

```json
"REACT_NO_STATIC_IMPORTS_IN_EVENT_HANDLERS": {
  eventAllowList: ['onClick'],
}
```


---

[View full sitemap](/docs/sitemap)