Fix performance on arrow click

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Shelf performance when clicking on the arrows.
 
 ## [1.34.0] - 2020-01-13
 ### Fixed

react/Shelf.js

@@ -46,7 +46,7 @@ const Shelf = ({
       paginationDotsVisibility,
       ...productList,
     }),
-    [filteredProducts, loading, isMobile, productList]
+    [filteredProducts, loading, isMobile, paginationDotsVisibility, productList]
   )
 
   if (loading) {

react/components/ProductList.js

@@ -3,7 +3,6 @@ import React, { Fragment } from 'react'
 import ReactResizeDetector from 'react-resize-detector'
 import { IOMessage } from 'vtex.native-types'
 import { useCssHandles } from 'vtex.css-handles'
-import { useProductImpression } from 'vtex.product-list-context'
 
 import {
   productListSchemaPropTypes,
@@ -18,6 +17,7 @@ import GapPaddingTypes, {
   getGapPaddingValues,
 } from '../utils/paddingEnum'
 import ShelfContent from './ShelfContent'
+import ProductListEventCaller from './ProductListEventCaller'
 
 const CSS_HANDLES = ['title']
 
@@ -42,7 +42,6 @@ const ProductList = ({
   showTitle,
   paginationDotsVisibility,
 }) => {
-  useProductImpression()
   const handles = useCssHandles(CSS_HANDLES)
   return products && !products.length ? null : (
     <Fragment>
@@ -70,6 +69,7 @@ const ProductList = ({
           />
         )}
       </ReactResizeDetector>
+      <ProductListEventCaller />
     </Fragment>
   )
 }

react/components/ProductListEventCaller.js

@@ -0,0 +1,8 @@
+import { useProductImpression } from 'vtex.product-list-context'
+
+const ProductListEventCaller = () => {
+  useProductImpression()
+  return null
+}
+
+export default ProductListEventCaller

react/components/ShelfItem.js

@@ -31,6 +31,7 @@ const ShelfItem = ({ item, summary }) => {
   const [inViewRef, inView] = useInView({
     // Triggers the event when the element is 75% visible
     threshold: 0.75,
+    triggerOnce: true,
   })
 
   const dispatch = useProductListDispatch()
@@ -39,7 +40,7 @@ const ShelfItem = ({ item, summary }) => {
     if (inView) {
       dispatch({ type: 'SEND_IMPRESSION', args: { product: product } })
     }
-  }, [inView])
+  }, [dispatch, inView, product])
 
   return (
     <ExtensionPoint