useReactCompiler

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/useReactCompiler
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactCompiler": "error"
6
      }
7
    }
8
  }
9
}

Description

Validate files with React Compiler.

This rule runs React Compiler in lint mode and reports the actionable diagnostics it emits. React Compiler validates whether components and hooks can be safely compiled.

This rule only runs when the nearest package.json declares React 19 or newer. Projects using React 18 or earlier, or projects without a React dependency in package.json, are skipped.

Examples

Invalid

1
{
2
    "dependencies": {
3
        "react": "^19.0.0"
4
    }
5
}

1
import { useState } from "react";
2

3
function Component(props) {
4
    if (props.enabled) {
5
        useState(0);
6
    }
7

8
    return <div />;
9
}

/Component.jsx:5:9 lint/nursery/useReactCompiler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This hook usage does not follow React’s rules.
  
    3 │ function Component(props) {
    4 │     if (props.enabled) {
  > 5 │         useState(0);
      │         ^^^^^^^^
    6 │     }
    7 │ 
  
  ℹ Hooks must be called directly at the top level of a component or custom hook, and in the same order on every render.
  
  ℹ Move the hook call to the top level, and call a statically known hook directly instead of passing, storing, or selecting it dynamically.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/10974 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
function Component(props) {
2
    return <div>{props.value}</div>;
3
}

Options

`compilationMode`

Controls which functions React Compiler analyzes. Accepted values are:

"infer" (default): analyzes functions that follow React conventions — components (capitalized functions that create JSX or call hooks) and hooks (functions whose name starts with use). Files that don’t define any such function are skipped entirely.
"annotation": analyzes only functions annotated with a "use memo" directive.
"all": analyzes every function. This can report React-specific diagnostics in non-React code, such as utility functions that update module-level state.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useReactCompiler": {
6
          "level": "on",
7
          "options": {
8
            "compilationMode": "all"
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

With "compilationMode": "all", violations are reported even in functions that don’t follow React naming conventions:

1
{
2
    "dependencies": {
3
        "react": "^19.0.0"
4
    }
5
}

1
let counter = 0;
2

3
export function increment() {
4
    counter = counter + 1;
5
    return counter;
6
}

/counter.js:4:5 lint/nursery/useReactCompiler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This component reassigns a variable declared outside it.
  
    3 │ export function increment() {
  > 4 │     counter = counter + 1;
      │     ^^^^^^^
    5 │     return counter;
    6 │ }
  
  ℹ Changing external variables during render makes component output depend on mutable shared state.
  
  ℹ Keep render logic local and immutable, or move shared updates into state, refs, or event handlers.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/10974 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.