Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering.
Rule Details
Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process.
Invalid
Examples of incorrect code for this rule:
// ❌ Component defined inside component
functionParent(){
constChildComponent =()=>{// New component every render!
const[count,setCount] =useState(0);
return<buttononClick={()=>setCount(count +1)}>{count}</button>;
};
return<ChildComponent/>;// State resets every render
}
// ❌ Dynamic component creation
functionParent({type}){
constComponent =type ==='button'
?()=><button>Click</button>
:()=><div>Text</div>;
return<Component/>;
}Valid
Examples of correct code for this rule:
// ✅ Components at module level
constButtonComponent =()=><button>Click</button>;
constTextComponent =()=><div>Text</div>;
functionParent({type}){
constComponent =type ==='button'
?ButtonComponent// Reference existing component
:TextComponent;
return<Component/>;
}Troubleshooting
I need to render different components conditionally
You might define components inside to access local state:
// ❌ Wrong: Inner component to access parent state
functionParent(){
const[theme,setTheme] =useState('light');
functionThemedButton(){// Recreated every render!
return(
<buttonclassName={theme}>
Click me
</button>
);
}
return<ThemedButton/>;
}Pass data as props instead:
// ✅ Better: Pass props to static component
functionThemedButton({theme}){
return(
<buttonclassName={theme}>
Click me
</button>
);
}
functionParent(){
const[theme,setTheme] =useState('light');
return<ThemedButtontheme={theme}/>;
}Note
If you find yourself wanting to define components inside other components to access local variables, that’s a sign you should be passing props instead. This makes components more reusable and testable.