Why this matters
Nesting components within other components causes state to be lost on re-renders and can lead to unnecessary recreations. Move nested components outside the parent to improve maintainability and performance.
Check if React components are defined inside other components. Nested components are recreated on every render, causing unnecessary re-renders. Suggest moving them outside the parent component.
Nesting components within other components causes state to be lost on re-renders and can lead to unnecessary recreations. Move nested components outside the parent to improve maintainability and performance.
Side-by-side examples engineers can pattern-match during review.
function Component() {
function NestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
return <div />;
}
return (
<div>
<NestedComponent />
</div>
);
class Component extends React.Component {
render() {
function UnstableNestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
return <div />;
}
return (
<div>
<UnstableNestedComponent />
</div>
);
}
}function OutsideComponent(props) {
return <div />;
}
function Component() {
return (
<div>
<OutsideComponent />
</div>
);
}function Component() {
function NestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
return <div />;
}
return (
<div>
<NestedComponent />
</div>
);
class Component extends React.Component {
render() {
function UnstableNestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
return <div />;
}
return (
<div>
<UnstableNestedComponent />
</div>
);
}
}function OutsideComponent(props) {
return <div />;
}
function Component() {
return (
<div>
<OutsideComponent />
</div>
);
}From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.