useReactNamingConvention (JavaScript)

Language JavaScript (and super languages)

Summary

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 rules checks the variable a React API hook is assigned to and enforces a name convention to make the intent of a value obvious 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);