# 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.

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


--------------------------------------------------------------------------------
title: "REACT_STABLE_CONTEXT_PROVIDER_VALUE"
description: "Prevent non-stable values from being used in React Context providers that could cause unnecessary re-renders."
last_updated: "2026-02-03T02:58:39.580Z"
source: "https://vercel.com/docs/conformance/rules/REACT_STABLE_CONTEXT_PROVIDER_VALUE"
--------------------------------------------------------------------------------