no-nested-lazy-component-declarations

Full Name in eslint-plugin-react-x

react-x/no-nested-lazy-component-declarations

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-nested-lazy-component-declarations

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

Examples

Failing

import { lazy } from "react";

function Editor() {
  // 🔴 Bad: This will cause all state to be reset on re-renders
  const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));
  //    ^^^^^^^^^^^^^^^
  //    - Do not declare lazy components inside other components. Instead, always declare them at the top level of your module.
  // ...
}

Passing

import { lazy } from "react";

// ✅ Good: Declare lazy components outside of your components
const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

function Editor() {
  // ...
}

Implementation

• Rule source
• Test source

Further Reading

• React Docs: Lazy
  • My lazy component’s state gets reset unexpectedly
• React Docs: Nesting and organizing components

See Also

• no-nested-component-definitions
  Disallow nesting component definitions inside other components.