← Back to rules

react/no-react-children Restriction

What it does

Disallows the usage of React.Children, as it is considered a bad practice.

Why is this bad?

Using React.Children is discouraged by the React documentation. It is an uncommon pattern and can lead to fragile code.

It is recommended to use alternative approaches for handling children. See the React documentation for more information.

TIP

Don't confuse React.Children with using the children prop (lowercase c), which is good and encouraged.

Note that this rule is based on a combination of multiple rules from @eslint-react/eslint-plugin, including @eslint-react/no-children-count and @eslint-react/no-children-for-each.

Examples

Examples of incorrect code for this rule:

import { Children } from "react";

Children.toArray(children);
Children.map(children, (child) => <div>{child}</div>);
Children.only(children);
Children.count(children);
Children.forEach(children, (child, index) => {});

import React from "react";

function Table({ children }) {
  const mappedChildren = React.Children.map(children, (child) => <tr>{child}</tr>);

  return <table>{mappedChildren}</table>;
}

import { Children } from "react";

function RowList({ children }) {
  return (
    <>
      <h1>Total rows: {Children.count(children)}</h1>
    </>
  );
}

Examples of correct code for this rule:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-react-children": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-react-children": "error",
  },
});

CLI

oxlint --deny react/no-react-children --react-plugin

Version

This rule was added in v1.53.0.

References

• Rule Source
• Open rule in Oxc Playground