Чому цикли for не працюють у JSX (і чому map працює)

Працюючи над проєктом на React, я замислився: чому JSX не рендерить цикл for, тоді як функція map працює бездоганно?

Це просте питання привело мене до розуміння ключової відмінності між тим, як працюють цикли for і функція map у JavaScript — та як вони узгоджуються з вимогами JSX.

Ключова відмінність

Головна причина, чому цикли for не працюють у JSX, полягає в їх природі:

• Цикли for — це оператори: Цикл for є імперативним оператором (imperative statement), тобто виконує певну послідовність дій, але сам по собі не повертає значення. JSX очікує вирази (expressions), які повертають значення для рендерингу, а цикли for не відповідають цій вимозі.
• map — це вираз: Натомість map є функціональним методом, який трансформує масив і повертає новий масив, зазвичай із JSX-елементами, якщо використовується у React. Повернений масив ідеально підходить для JSX, щоб рендерити компоненти інтерфейсу.

Приклад: for проти map

Ось практичне порівняння:

Використання циклу for (не підтримується напряму в JSX)

const items = [1, 2, 3];   
const elements = [];   
for (let i = 0; i < items.length; i++) {   
 elements.push(
{items[i]}
);   
}   
return 
{elements}
;

Такий підхід працює, але ви не можете напряму використовувати цикл for у JSX. Вам потрібен зовнішній масив (elements), щоб накопичувати JSX-елементи, а потім рендерити їх. Це менш зручний і більш ручний підхід.

Використання map (чистий і декларативний підхід)

const items = [1, 2, 3];   
return (     
     {items.map((item, index) => (     
{item}
     ))}     
    );

Тут map напряму перетворює масив у JSX-елементи і повертає їх, що робить код коротким, чистим і повністю сумісним із JSX.

Використання циклів for у JSX можливо, але незручно

Якщо ви хочете використовувати цикл for у JSX, вам доведеться створити масив елементів вручну поза JSX і потім включити його у JSX.

Приклад:

const items = [1, 2, 3];      
const elements = [];   
for (let i = 0; i < items.length; i++) {    
 elements.push(
{items[i]}
);   
}      
return 
{elements}
;

Цей підхід працює, але він менш елегантний порівняно з map, тому що:

• Вам потрібен зовнішній масив elements для накопичення JSX.
• Це додає зайві кроки і використовує змінний стан (mutable state) через elements.push.

Чому розробники React віддають перевагу map

• Декларативний синтаксис: Функція map напряму інтегрується з JSX і повертає новий масив, уникаючи зовнішнього змінного стану.
• Чистий код: map скорочує зайві рядки і робить код читабельнішим.
• Функціональний стиль: React дотримується принципів функціонального програмування, і map краще відповідає цьому підходу.

Висновок:

• Цикли for не можна напряму використовувати у JSX, оскільки JSX очікує виразів, а for є оператором.
• map працює ідеально, оскільки повертає масив, який JSX може рендерити.
• Ви можете використовувати цикл for поза JSX для створення масиву вручну, але це менш зручно і суперечить декларативному стилю React.

Якщо вам потрібна допомога у рефакторингу прикладів для використання map або більш чистого підходу, звертайтеся! 😊

Перекладено з: Why for Loops Don't Work in JSX (and Why map Does)