Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

11.01.2023

Антіпаттерн Reselect: один селектор залежить від даних іншого

const category = useSelector((s) => selectCategory(s, expense.categoryID));
const goal = useSelector(
  (s) => category?.goalID && selectGoal(category.goalID)
);

Антіпаттерн Reselect - коли один селектор залежить від даних іншого. Поганого тут те, що селектори створюються у момент виклику компоненти. А значить, щоб повністю отримати або оновити дані, доведеться неодмінно викликати її двічі — для отримання результату першого селектору, а потім другого. (От вам і несподіване уповільнення.)

Така ситуація складається через бажання робити селектори надто абстрактними та універсальними. (Особливо іронічно буде, якщо подібний код повторюється кожного разу, коли потрібна категорія.)

Щоб спрямити антіпаттерн, треба сконструювати селектор, який відразу повертає всі необхідні значення. Якщо він повертатиме складений тип — обʼєкт чи масив — не забути зробити селектор стабільним. Тоді не тільки можна буде уникнути подвійного виклику компоненти, але й, можливо, взагалі її не викликати, якщо результат селектора не змінюється.

Як правило, компоненти React мають містити тільки логіку відображення даних. Логіка комбінації даних належить до шару Reselect.