react/no-unstable-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

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

Passing

export default function Gallery() {
  // ...
}
 
// 🟢 Declare components at the top level
function Profile() {
  // ...
}

When a child component needs some data from a parent, pass it by props (opens in a new tab) instead of nesting definitions.

Further Reading

• react.dev: Nesting and organizing components (opens in a new tab)