---
url: /docs/guide/usage/linter/rules/react/globals.md
---

### What it does

Disallows assigning to or mutating variables declared outside a
component or hook during render; side effects must run outside of
render.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
[`react-hooks/globals`](https://react.dev/reference/eslint-plugin-react-hooks/lints/globals).

### Why is this bad?

Components must be pure so React can render them at any time and in
any order. Writing to a global during render makes the output depend
on how often the component has rendered, and breaks under Strict Mode
and concurrent rendering.

### Examples

Examples of **incorrect** code for this rule:

```jsx
let someGlobal = false;
function Component() {
  someGlobal = true; // assignment during render
  return <div>{String(someGlobal)}</div>;
}
```

Examples of **correct** code for this rule:

```jsx
import { useEffect } from "react";
let someGlobal = false;
function Component() {
  useEffect(() => {
    someGlobal = true;
  }, []);
  return <div />;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References