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

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

When a lazy component is declared 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

Just like regular components, lazy components should be declared at the top level of your module so that React can properly track their identity across renders. When a lazy component is recreated, React treats it as a different component type, causing the old one to unmount and the new one to mount — discarding all state and DOM nodes in the process.

Examples

Declaring lazy components inside a component

// Problem: Declaring MarkdownPreview inside Editor causes the lazy component to be recreated on every render, resetting its state unexpectedly
import { lazy } from "react";

function Editor() {
  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.
  // ...
}

Declaring lazy components at the module level

// Recommended: Declare lazy components at the module level to keep references stable and state persistent
import { lazy } from "react";

const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

function Editor() {
  // ...
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

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

See Also

• react-x/no-nested-component-definitions
  Disallows nesting component definitions inside other components.
• react-x/static-components
  Validates that components are static, not recreated every render.