No JSX Spread Child

Error

small-rules/no-jsx-spread-child

Disallow a spread in JSX child position.

Rationale

A spread between JSX tags, such as <List>{...items}</List>, parses as a JSXSpreadChild. The React Compiler can’t emit one back into a JSXExpressionContainer, so the whole component throws out of codegen and memoizes nothing. {items} renders the same tree, because React flattens an array child. A spread on an attribute, such as {...properties} in an opening tag, is fine.

Diagnostic Messages

noJsxSpreadChild

A spread in JSX child position parses as a `JSXSpreadChild`, which the React Compiler cannot emit back, so the whole component throws and memoizes nothing. Drop the `...`: React flattens an array child. Keep a `key` on every element.

Configuration

This rule does not accept options.

.oxlintrc.json

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-jsx-spread-child": "error"
  }
}

oxlint.config.ts

import { defineConfig } from "oxlint";

export default defineConfig({
  jsPlugins: ["@pobammer-ts/small-rules"],
  rules: {
    "small-rules/no-jsx-spread-child": "error",
  },
});

Examples

Spread between JSX tags

const list = <List>{...items.map(render)}</List>;

Array child without a spread

const list = <List>{items.map(render)}</List>;