useDispatch рендер без изменений

Question

Это функциональный компонент с подключением к магазину Redux для получения продуктов. Кроме того, я определил removeFromCart крючок для удаления элемента из списка продуктов.

const ProductListHooks = () => {
  const products = useSelector( state => state.productsModule.products);
  const removeFromCart = useDispatch({ type:actions.REMOVE_FROM_CART});
  return (
    <>
      {products.map(product => {
        return (
          <ProductItem
            product={product}
            key={product.id}
            removeFromCart={removeFromCart}
          />
        );
      })}
    </>
  );
};

Проблема: Когда я звоню removeFromCart, он удаляет элемент, но повторно отображает все остальные предметы в списке. Как я могу это исправить?

Answer 1

Может быть не красиво, но вы можете запомнить каждый предмет:

const ProductItem = function memo({ product, removeFromCart }) {
 return useMemo(() => 
       <Item product={product} removeFromCart={removeFromCart} />
    , [product]);

}