logoESLint React
Rules

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

Description

Disallows defining React components inside other components.

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 rerenders
  • It defeats props memoization and optimization techniques
  • It creates new function references on every render

Instead, define every component at the top level.

Examples

Failing

import React from "react";

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

Passing

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

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

Implementation

Further Reading


See Also