Rules
no-nested-lazy-component-declarations
Full Name in eslint-plugin-react-x
react-x/no-nested-lazy-component-declarationsFull Name in @eslint-react/eslint-plugin
@eslint-react/no-nested-lazy-component-declarationsPresets
xrecommendedrecommended-typescriptrecommended-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() {
// ...
}Implementation
Further Reading
See Also
no-nested-component-definitions
Disallow nesting component definitions inside other components.