noNestedComponentDefinitions
Summary
Section titled “Summary”- Rule available since:
v2.0.0 - Diagnostic Category:
lint/nursery/noNestedComponentDefinitions - This rule doesn’t have a fix.
- The default severity of this rule is error.
- This rule belongs to the following domains:
- Sources:
Description
Section titled “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
Section titled “Examples”Invalid
Section titled “Invalid”A new component is created every time ParentComponent renders:
function ParentComponent() { function ChildComponent() { return <div>Hello</div>; }
return <ChildComponent />;}code-block.jsx:2:12 lint/nursery/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:
function ParentComponent() { const MemoizedChild = memo(() => { return <div>Hello</div>; });
return <MemoizedChild />;}code-block.jsx:2:9 lint/nursery/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.
Component is defined outside other components:
function ChildComponent() { return <div>Hello</div>;}
function ParentComponent() { return <ChildComponent />;}Correct approaches
Section titled “Correct approaches”- Move the component definition outside:
function ChildComponent() { return <div>Hello</div>;}
function ParentComponent() { return <ChildComponent />;}- Pass components as props:
function ParentComponent({ CustomComponent }) { return <CustomComponent />;}- Use React’s Children API:
function ParentComponent({ children }) { return <div>{children}</div>;}How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noNestedComponentDefinitions": "error" } } }}