React

JSX Rules: Enforce proper JSX syntax and patterns
Hooks Rules: Ensure React hooks are used correctly
Component Rules: Enforce React component best practices
Children Handling: Prevent improper children prop usage

The React configuration has React-specific linting rules for JSX, hooks, and component patterns.

Installation

Add the React configuration to your biome.jsonc:

biome.jsonc

{
  "extends": ["ultracite/core", "ultracite/react"]
}

This configuration adds rules specific to React development:

Rule	Setting	Description
`noChildrenProp`	`error`	Prevent passing children as props. Children should be nested between the opening and closing tags.
`noNestedComponentDefinitions`	`error`	Prevent component definitions inside other components. This causes unnecessary re-renders.
`noReactPropAssignments`	`error`	Prevent reassigning props in React components. Props should be treated as immutable.
`noRenderReturnValue`	`error`	Prevent usage of the return value from `ReactDOM.render()`.
`noVoidElementsWithChildren`	`error`	Prevent void elements (like `<img>`, `<br>`) from having children.
`useExhaustiveDependencies`	`error`	Enforce all dependencies are correctly specified in React hooks (useEffect, useCallback, useMemo).
`useHookAtTopLevel`	`error`	Enforce that all React hooks are called from the top level of component functions, not inside loops, conditions, or nested functions.
`useJsxKeyInIterable`	`error`	Enforce that elements in iterables have a `key` prop for React's reconciliation.

Rule	Setting	Description
`noReactForwardRef`	`error`	Prevent usage of legacy `React.forwardRef`. Use ref as a prop instead (React 19+).
`useReactFunctionComponents`	`error`	Enforce using function components over class components in React.

Rule	Setting	Description
`noArrayIndexKey`	`error`	Prevent using array indices as keys. Array indices are not stable identifiers and can cause issues with component state.
`noDuplicateJsxProps`	`error`	Prevent duplicate properties in JSX.
`noSuspiciousSemicolonInJsx`	`error`	Prevent semicolons that change the semantic of JSX elements.
`noReactSpecificProps`	`off`	Allow React-specific props like `className` and `htmlFor`.