no-children-count

Full Name in eslint-plugin-react-x

react-x/no-children-count

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-children-count

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Using Children is uncommon and can lead to fragile code. See common alternatives.

Examples

Counting children to conditionally render

Relying on Children.count makes your component tightly coupled to React's internal children representation. Instead, let the parent decide what to render or use standard JavaScript patterns.

For example, if you need to know how many items to display, you can accept an array as a prop directly and use .length:

// Recommended: accept data as an array prop
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <>
      <h1>Total rows: {items.length}</h1>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </>
  );
}

// Problem: Using Children.count to determine the number of children
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

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

Using component composition

Instead of counting children, compose components so that the parent controls the layout and the child components simply render what they receive.

// Recommended: use component composition to wrap items
interface RowListProps {
  children: React.ReactNode;
}

function RowList({ children }: RowListProps) {
  return <div className="RowList">{children}</div>;
}

interface RowProps {
  children: React.ReactNode;
}

function Row({ children }: RowProps) {
  return <div className="Row">{children}</div>;
}

function App() {
  return (
    <RowList>
      <Row><p>First item</p></Row>
      <Row><p>Second item</p></Row>
    </RowList>
  );
}

Conditionally rendering based on item count

If a component needs to show different UI depending on how many items there are, let the parent compute the count from its own data rather than inspecting children.

// Recommended: compute the count from props in the parent
interface ItemListProps {
  items: string[];
}

function ItemList({ items }: ItemListProps) {
  const hasItems = items.length > 0;
  return (
    <div>
      {hasItems ? (
        <ul>
          {items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>No items available.</p>
      )}
    </div>
  );
}

Rule Details

Examples

Counting children to conditionally render

Using component composition

Conditionally rendering based on item count

Versions

Resources

Further Reading

See Also

On this page

no-children-count

[5.2.3-beta.0] - 2026-04-14

[3.0.0-rc.0] - 2026-03-08

[0.9.0] - 2023-12-01

On this page