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. Instead, define every component at the top level.

Examples

❌ Incorrect

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

✅ Correct

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)