biome-plugin-react-component-name

Biome plugin (GritQL) that flags anonymous functions passed to React higher-order helpers like memo, forwardRef, observer, reatomComponent so they are not rendered as Anonymous / ForwardRef in React DevTools and stack traces.

Port of eslint-plugin-react-component-name to Biome 2.x via its GritQL plugin system.

Status

• Diagnostics: ✅ supported.
• Autofix: ❌ not yet — Biome 2.x GritQL plugins can only register diagnostics, code rewrites from plugins are not applied. The original ESLint plugin offers autofix; that part is intentionally out of scope until Biome adds plugin code actions. Once available, the rules in this package will gain autofix without a config change.

Requirements

• @biomejs/biome >= 2.0.0 (GritQL plugins are required).

Installation

npm install biome-plugin-react-component-name --save-dev

Usage

Reference the plugin's .grit files from your biome.json:

{
  "$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
  "plugins": [
    "./node_modules/biome-plugin-react-component-name/src/rules/react-component-name.grit"
  ]
}

The default rule covers memo and forwardRef (both bare and as React.memo / React.forwardRef). To also lint MobX observer or Reatom reatomComponent, add the corresponding files:

{
  "plugins": [
    "./node_modules/biome-plugin-react-component-name/src/rules/react-component-name.grit",
    "./node_modules/biome-plugin-react-component-name/src/rules/observer.grit",
    "./node_modules/biome-plugin-react-component-name/src/rules/reatom-component.grit"
  ]
}

Differences from the ESLint version

• No runtime targets option. Biome's GritQL plugin system is declarative and does not pass per-rule options from biome.json. Instead of a single rule with targets: [...], this package ships separate .grit files per target group; users opt in by listing the files they need.
• No autofix yet (see Status).

Examples

Reported

const MyComponent = memo(() => {
  return <div>Hello</div>;
});

const MyRef = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

Not reported

const MyComponent = memo(function MyComponent() {
  return <div>Hello</div>;
});

const MyRef = forwardRef(function MyRef(props, ref) {
  return <input ref={ref} {...props} />;
});

License

MIT