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

Common Violations

Invalid

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.
  // ...
}

Valid

import { lazy } from "react";

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

function Editor() {
  // ...
}

Resources

• 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

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