← Back to rules

react/static-components Correctness

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.

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:

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

Examples of correct code for this rule:

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

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/static-components": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/static-components": "error",
  },
});

CLI

oxlint --deny react/static-components --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground