Why this matters
Passing React children through the children prop instead of nesting them can lead to conflicts and errors, especially if both approaches are used simultaneously. Always pass children as nested components for clarity.
Check if React children are passed as regular props instead of being nested inside components. Passing them incorrectly can cause conflicts and reduce clarity.
Passing React children through the children prop instead of nesting them can lead to conflicts and errors, especially if both approaches are used simultaneously. Always pass children as nested components for clarity.
Side-by-side examples engineers can pattern-match during review.
<div children='Children' />
<Foo children={<Bar />} />
React.createElement("div", { children: 'Children' })<div>Children</div>
<Foo><Bar /></Foo>
React.createElement("div", {}, 'Children');<div children='Children' />
<Foo children={<Bar />} />
React.createElement("div", { children: 'Children' })<div>Children</div>
<Foo><Bar /></Foo>
React.createElement("div", {}, 'Children');From the same buckets as this rule.
Check if loops use equality operators (== or !=) in termination conditions. These can lead to infinite loops if the condition is never met exactly. Instead, use relational operators like < or > for safer loop termination.