no-nested-component-definitions

Full Name in eslint-plugin-react-x

react-x/no-nested-component-definitions

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-nested-component-definitions

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.

When a component is defined inside another component:

• It gets recreated on every render of the parent component
• It loses its internal state when the parent re-renders
• It defeats prop memoization and optimization techniques
• It creates new function references on every render

Instead, define every component at the top level.

Common Violations

Invalid

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

Valid

// ✅ Declare components at the top level
function Gallery() {
  // ...
}
function Profile() {
  /* ... */
}

When a child component needs data from a parent, pass it by props instead of nesting definitions.

Resources

• Rule Source
• Test Source

Further Reading

• React Docs: Nesting and organizing components
• React Docs: static-components Lint Rule

See Also

• react-x/component-hook-factories
  Disallows higher order functions that define components or hooks inside them.
• react-x/no-nested-lazy-component-declarations
  Disallows nesting lazy component declarations inside other components.