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

Disallow nesting component definitions inside other components.

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 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

• Rule source
• Test source

Further Reading

• React Docs: Nesting and organizing components

See Also

• no-nested-lazy-component-declarations
  Disallow nesting lazy component declarations inside other components.