no-nested-components
Rule category
Correctness.
What it does
Prevents nesting component definitions inside other components.
Why is this bad?
Nesting component definitions inside other components is a common mistake that can be extremely slow and cause issues and bugs, and the state of components defined during rendering will not be preserved by React. Instead, define every component at the top level.
Examples
Failing
import React from "react";
function function Gallery(): void
Gallery() {
function function (local function) Profile(): void
Profile() {Never define a component inside another component! /* ... */
}
// ...
}
Passing
function function Gallery(): void
Gallery() {
// ...
}
Declare components at the top levelfunction function Profile(): void
Profile() {
/* ... */
}
When a child component needs some data from a parent, pass it by props instead of nesting definitions.