Как можно оптимизировать вычисления в компоненте react?

Question

[Vadim Stepanenko]

Привет! Есть проект на react+redux, на хуках
Стор выглядит примерно так:

{
     items: [...],  // массив объектов с товарами, по типу { id: 1, title: 'hello', price: 100 }
     activeItemId: 1, // ID выбранного итема из массива items
}

В компоненте товара получаю инфу о нем таким образом:

const activeItemId  = useSelector((state) => state.activeItemId);
const items  = useSelector((state) => state.items);

const activeItem = items.find((item) => item.id === activeItemId);

Но как я понимаю, последняя строка будет выполняться при каждом перерендере компонента, что в общем то не нужно. Как можно закешировать (?) activeItem, чтобы find не выполнялся при каждом пере-рендере?

Answer 1

[Alexandroppolus]

Обычно items делается в виде объекта, и тогда activeItem = items[activeItemId], это выполняется очень быстро.
Но если надо именно массив, то можно сделать так:

const activeItem = useMemo(() => items.find((item) => item.id === activeItemId), [items, activeItemId]);

Comments

[Vadim Stepanenko]

да, именно так и сделал :)
спасибо!