noNestedComponentDefinitions

Это содержимое пока не доступно на вашем языке.

JSX and TSX

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/correctness/noNestedComponentDefinitions
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react
Sources:
- Same as @eslint-react/no-nested-components
- Same as @eslint-react/no-nested-component-definitions

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noNestedComponentDefinitions": "error"
6
      }
7
    }
8
  }
9
}

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

Invalid

A new component is created every time ParentComponent renders:

1
function ParentComponent() {
2
  function ChildComponent() {
3
    return <div>Hello</div>;
4
  }
5

6
  return <ChildComponent />;
7
}

code-block.jsx:2:12 lint/correctness/noNestedComponentDefinitions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Components should not be defined inside other components.
  
    1 │ function ParentComponent() {
  > 2 │   function ChildComponent() {
      │            ^^^^^^^^^^^^^^
    3 │     return <div>Hello</div>;
    4 │   }
  
  ℹ Move it outside of the parent component or pass it as a prop.
  
  > 1 │ function ParentComponent() {
      │          ^^^^^^^^^^^^^^^
    2 │   function ChildComponent() {
    3 │     return <div>Hello</div>;
  
  ℹ Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.

Even with memo, a new component is still created on each render:

1
function ParentComponent() {
2
  const MemoizedChild = memo(() => {
3
    return <div>Hello</div>;
4
  });
5

6
  return <MemoizedChild />;
7
}

code-block.jsx:2:9 lint/correctness/noNestedComponentDefinitions ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Components should not be defined inside other components.
  
    1 │ function ParentComponent() {
  > 2 │   const MemoizedChild = memo(() => {
      │         ^^^^^^^^^^^^^
    3 │     return <div>Hello</div>;
    4 │   });
  
  ℹ Move it outside of the parent component or pass it as a prop.
  
  > 1 │ function ParentComponent() {
      │          ^^^^^^^^^^^^^^^
    2 │   const MemoizedChild = memo(() => {
    3 │     return <div>Hello</div>;
  
  ℹ Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.

Valid

Component is defined outside other components:

1
function ChildComponent() {
2
  return <div>Hello</div>;
3
}
4

5
function ParentComponent() {
6
  return <ChildComponent />;
7
}

Correct approaches

Move the component definition outside:

1
function ChildComponent() {
2
  return <div>Hello</div>;
3
}
4

5
function ParentComponent() {
6
  return <ChildComponent />;
7
}

Pass components as props:

1
function ParentComponent({ CustomComponent }) {
2
  return <CustomComponent />;
3
}

Use React’s Children API:

1
function ParentComponent({ children }) {
2
  return <div>{children}</div>;
3
}