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

Disallow nesting lazy component declarations inside other components.

When a lazy component is declared inside another component, it will be re-created on every render of the parent component. This can lead to unexpected behavior, such as resetting the state of the lazy component.

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

no-nested-lazy-component-declarations

Description

Examples

Failing

Passing

Implementation

Further Reading

See Also

On this page