React · Middle · Question 6 of 75
Why shouldn't you declare a component inside another component?
function Page() {
function Row({ item }) { return <li>{item}</li>; }
return <ul>{items.map(i => <Row key={i} item={i} />)}</ul>;
}- 1Nested functions can't return JSX without
React.memo - ✓Correct answer: Each render creates a new
Rowtype - it gets recreated - 3It breaks the rules of hooks and causes a linter error
Explanation
To React, Row from different renders are different component types, since they're new functions. So the subtree unmounts and remounts every time: state and focus are lost, and the DOM is recreated. Declare components at the top level of the module.