logoESLint React
Rules

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

Features

🔍

Presets

  • core
  • recommended
  • recommended-typescript
  • recommended-type-checked

What it does

Prevents the use of Children.count from the react package.

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

Examples

Failing

import React, { Children } from "react";
 
interface MyComponentProps {
  children: React.ReactNode;
}
 
function MyComponent({ children }: MyComponentProps) {
  return (
    <>
      <h1>Total rows: {Children.count(children)}</h1>
      ...
    </>
  );
}

Implementation

Further Reading

Previous

no-array-index-key

Next

no-children-for-each

On this page