useReactNamingConvention (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.5.12
Diagnostic Category: lint/nursery/useReactNamingConvention
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Same as @eslint-react/naming-convention-context-name
- Same as react-naming-convention/context-name
- Same as @eslint-react/naming-convention-id-name
- Same as react-naming-convention/id-name
- Same as @eslint-react/naming-convention-ref-name
- Same as react-naming-convention/ref-name

How to configure

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

Description

Enforces naming conventions for React createContext, useId, and useRef.

This rule checks the name that receives the result of each React API call. Consistent names make the purpose of the value clear at a glance:

A value assigned from createContext must be a valid component name (PascalCase) with the suffix Context, for example ThemeContext.
A value assigned from useId must be named id or a valid camelCase name ending with Id, for example myId.
A value assigned from useRef must be named ref or a valid camelCase name ending with Ref, for example myRef.

Examples

Invalid

1
import { createContext } from "react";
2
const theme = createContext("");

code-block.jsx:2:7 lint/nursery/useReactNamingConvention ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This React context is not following the context naming convention.
  
    1 │ import { createContext } from "react";
  > 2 │ const theme = createContext("");
      │       ^^^^^
    3 │ 
  
  ℹ React contexts have to follow a naming convention to make them more recognizable across the codebase.
  
  ℹ Rename it to a PascalCase name ending with Context, such as ThemeContext.
  
  ℹ 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.

1
import { useId } from "react";
2
const randomString = useId();

code-block.jsx:2:7 lint/nursery/useReactNamingConvention ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This React id is not following the id naming convention.
  
    1 │ import { useId } from "react";
  > 2 │ const randomString = useId();
      │       ^^^^^^^^^^^^
    3 │ 
  
  ℹ React ids have to follow a naming convention to make them more recognizable across the codebase.
  
  ℹ Rename the value to id or a name ending with Id, such as myId.
  
  ℹ 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.

1
import { useRef } from "react";
2
const node = useRef(null);

code-block.jsx:2:7 lint/nursery/useReactNamingConvention ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This React ref is not following the ref naming convention.
  
    1 │ import { useRef } from "react";
  > 2 │ const node = useRef(null);
      │       ^^^^
    3 │ 
  
  ℹ React refs have to follow a naming convention to make them more recognizable across the codebase.
  
  ℹ Rename the value to ref or a name ending with Ref, such as myRef.
  
  ℹ 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
import { createContext } from "react";
2
const ThemeContext = createContext("");

1
import { useId } from "react";
2
const myId = useId();

1
import { useRef } from "react";
2
const myRef = useRef(null);