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

### What it does

Validates that components are static — defined at module scope rather
than recreated on every render — because dynamically recreated
components reset state and cause excessive re-rendering.

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

### Why is this bad?

A component created during render gets a new identity on every render,
so React unmounts and remounts it each time — resetting all of its
state and re-rendering its entire subtree.

### Examples

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

```jsx
function Example(props) {
  const Component = createComponent();
  return <Component />;
}
```

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

```jsx
function Inner(props) {
  return <div>{props.text}</div>;
}
function Outer() {
  return <Inner text="hello" />;
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References