How can I optimize calculations in the react component?

Question

React

Hey! There is a project on react + redux, on hooks the
Store looks something like this:

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

In the product component, I get information about it in this way:

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

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

But as I understand it, the last line will be executed every time the component is re-rendered, which is generally not necessary. How can I cache(?) activeItem so that find doesn't get executed on every re-render?

Answer 1

Usually items is made as an object, and then activeItem = items[activeItemId], this is very fast.
But if you need an array, then you can do this:

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