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>
      ...
    </>
  );
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• Legacy React APIs: Children

See Also

• react-x/no-children-for-each
  Disallows the use of Children.forEach from the react package.
• react-x/no-children-map
  Disallows the use of Children.map from the react package.
• react-x/no-children-only
  Disallows the use of Children.only from the react package.
• react-x/no-children-to-array
  Disallows the use of Children.toArray from the react package.