JSX: как разделять логику и отрисовку в разметке, сгенерированной методом map

Давайте представим себе частый кейс — вы с бека получаете какой-то массив данных, из которых вы будете делать разметку, что будет содержимым вашей страницы.

Для примера возьмем список пользователей, и вам надо отрендерить этот список. Вам пришел массив и вы, не теряя времени, прогоняете его через map, создавая, таким образом свою разметку — вот так:

return (   <ul className="list">     {users.map(user => (       <Fragment key={user.name.name}>         <li>{user.name.name} {user.name.patronomic} {user.name.surname}</li>         <li>{user.regestrationDate}</li>         <li>{user.status.description}</li>       </Fragment>     ))}   </ul> );

Окей, тут все просто. Но давайте представим, что с бека (как это часто бывает) данные вам приходят не чистыми, но их еще надо обрабатывать. Например, отчества может не быть, то есть нужно сделать проверку, а имена и фамилии нужно привести к ловеркейсу.

Также при наличии даты регистрации, привести ее к нужному виду, а если нет, то сгенерить дату и отправить ее на бек.

Ну и напоследок, если статус нужно залить соответствующим стилем из заготовленного словаря, который завязан на отдельном свойстве value; если стиля в словаре нет — сделать какой-нибудь дефолтный.

Делать все эти операции в разметке плохая идея, ведь нам хочется как раз разгрузить разметку, так что давайте сразу все вынесем в отдельные переменные.

Давайте представим как это могло бы выглядеть:

return (   <ul className="list">     {users.map(user => {       const fullName = `         {user.name.name}          {user.name.patronomic ? user.name.patronomic : ''}          {user.name.surname}       `.toLowerCase();       const date = user.regestrationDate          ? moment(user.regestrationDate)         : null;       const statusColor = ['В сети', 'Не в сети'].includes(         user.status.description,       )       ? STATUS_COLORS[user.status.value]       : 'neutral';        retrun (         <Fragment key={user.name.name}>           <li>{fullName}</li>           <li>{date}</li>           <li className={statusColor}>{user.status.description}</li>         </Fragment>       );     })}   </ul> );

Супер — всего 27 строк кода. А теперь представьте что у вас на проекте все это происходит в компоненте, где разметка занимает несколько сот строк кода (хотя бы). И такие простые утилитарные обработки отвлекают внимание и мешают увидеть общую картину разметки, а это в больших сложных проектах критично.

Что тут можно сделать? Я предлагаю выносить все утилитарные вычисления в отдельную функцию с префиксом «with» или «proxy», которая будет как некая «прослойка» содержать код расчета переменных и передавать их обратно в колбек, который занимается разметкой.

Продемонстрируем. Создадим функцию «withProxyUser», в которую обернем колбек разметки, перенесем в нее все переменные и передадим их обратно в колбек разметки с оригинальным обьектом user. Вот так:

const withProxyUser = callback => user => {   const fullName = `     {user.name.name}      {user.name.patronomic ? user.name.patronomic : ''}      {user.name.surname}   `.toLowerCase();      const date = user.regestrationDate      ? moment(user.regestrationDate)     : null;      const statusColor = ['В сети', 'Не в сети'].includes(     user.status.description,   )   ? STATUS_COLORS[user.status.value]   : 'neutral';    return callback({user, fullName, date, statusColor}); }  return (   <ul className="list">     {users.map(       withProxyUser(({user, fullName, date, statusColor}) => (         <Fragment key={user.name.name}>           <li>{fullName}</li>           <li>{date}</li>           <li className={statusColor}>{user.status.description}</li>         </Fragment>       ))     )}   </ul> );

Обратите внимание как объявляется функция withProxyUser — это множественный колбек. Чтобы не запутаться — первая переменная — это то что мы передаем в withProxyUser — то есть сам колбек; вторая переменная — то что мы получаем вне withProxyUser — то есть переменные из map.

И того наша разметка заметно «похудела», а про withProxyUser можно забыть — даже можно вынести ее в файл с утилитами, что еще больше разгрузит наш компонент.

Вот и все. Держите свою разметку в форме — пожалейте глаза и время коллег.

Спасибо.