React · Middle · Запитання 6 з 75
Чому не можна оголошувати компонент усередині іншого компонента?
function Page() {
function Row({ item }) { return <li>{item}</li>; }
return <ul>{items.map(i => <Row key={i} item={i} />)}</ul>;
}- 1Вкладені функції не можуть повертати JSX без
React.memo - ✓Правильна відповідь: Кожен рендер створює новий тип
Row- він перестворюється - 3Це порушує правила хуків і спричиняє помилку лінтера
Пояснення
Для React Row з різних рендерів - різні типи компонентів, адже це нові функції. Тому піддерево щоразу розмонтовується й монтується заново: втрачаються стан і фокус, а DOM перестворюється. Компоненти оголошують на верхньому рівні модуля.