More perf changes

components/product/ProductSlider/ProductSlider.tsx

@@ -10,7 +10,7 @@ import React, {
 import cn from 'classnames'
 import { a } from '@react-spring/web'
 import s from './ProductSlider.module.css'
-import { ArrowLeft, ArrowRight } from '@components/icons'
+import ProductSliderControl from '../ProductSliderControl'
 
 const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
@@ -73,30 +73,16 @@ const ProductSlider: FC = ({ children }) => {
     }
   }, [])
 
+  const onPrev = React.useCallback(() => slider.prev(), [slider])
+  const onNext = React.useCallback(() => slider.next(), [slider])
+
   return (
     <div className={s.root} ref={sliderContainerRef}>
       <div
         ref={ref}
         className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
       >
-        {slider && (
-          <div className={s.control}>
-            <button
-              className={cn(s.leftControl)}
-              onClick={slider.prev}
-              aria-label="Previous Product Image"
-            >
-              <ArrowLeft />
-            </button>
-            <button
-              className={cn(s.rightControl)}
-              onClick={slider.next}
-              aria-label="Next Product Image"
-            >
-              <ArrowRight />
-            </button>
-          </div>
-        )}
+        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
         {Children.map(children, (child) => {
           // Add the keen-slider__slide className to children
           if (isValidElement(child)) {