React & Modern Frontend (445 Qs)•Part 8: Advanced React Patterns, Portals & Performance (152 - 261)
What will happen by defining nested function components?
Technically it is possible to write nested function components but it is not suggested to write nested function definitions. Because it leads to unexpected bugs and performance issues.
Practical Code Example
jsx
// Defining nested component functions causes bugs:
function Parent() {
// BAD: Redefined on EVERY render of Parent, destroying Child's internal state!
function Child() { return <input />; }
return <Child />;
}
// CORRECT: Always define components at top level!