Creating components inside components without memoization leads to unstable components. The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render.
React reconcilation performs element type comparison with reference equality. The reference to the same element changes on each re-render when defining components inside the render block. This leads to complete recreation of the current node and all its children. As a result the virtual DOM has to do extra unnecessary work and possible bugs are introduced.
The following patterns are considered warnings:
function Component() {
function UnstableNestedComponent() {
return <div />;
}
return (
<div>
<UnstableNestedComponent />
</div>
);
}
class Component extends React.Component {
render() {
function UnstableNestedComponent() {
return <div />;
}
return (
<div>
<UnstableNestedComponent />
</div>
);
}
}
The following patterns are not considered warnings:
function OutsideDefinedComponent(props) {
return <div />;
}
function Component() {
return (
<div>
<OutsideDefinedComponent />
</div>
);
}
function Component() {
const MemoizedNestedComponent = React.useCallback(() => <div />, []);
return (
<div>
<MemoizedNestedComponent />
</div>
);
}
...
"react/no-unstable-nested-components": "off" | "warn" | "error"
...
If you are not interested in preventing bugs related to re-creation of the nested components or do not care about optimization of virtual DOM.