added memo and callback on the mouseover function

Author: [email protected]

src/components/design-library-list/design-library-list-item.js

@@ -19,11 +19,13 @@ import { Tooltip } from '~stackable/components'
 /**
  * WordPress dependencies.
  */
-import { useState, useRef } from '@wordpress/element'
+import {
+	useState, useRef, memo,
+} from '@wordpress/element'
 import { Dashicon, Spinner } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 
-const DesignLibraryListItem = props => {
+const DesignLibraryListItem = memo( props => {
 	const {
 		selectedTab,
 		plan, label,
@@ -161,7 +163,7 @@ const DesignLibraryListItem = props => {
 			</footer>
 		</button>
 	)
-}
+} )
 
 DesignLibraryListItem.defaultProps = {
 	designId: '',

src/components/design-library-list/use-auto-scroll.js

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element'
+import {
+	useRef, useEffect, useCallback,
+} from '@wordpress/element'
 
 const NOOP = () => {}
 
@@ -101,7 +103,7 @@ export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
 		}
 	}
 
-	const onMouseDownImpl = () => {
+	const onMouseDownImpl = useCallback( () => {
 		// Stop auto-scrolling when user interacts
 		isScrollingRef.current = false
 		if ( animationFrameRef.current ) {
@@ -115,7 +117,7 @@ export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
 			delayTimeoutRef.current = null
 		}
 		scrollPositionRef.current = -1
-	}
+	}, [] )
 
 	// Cleanup any pending animation on unmount.
 	useEffect( () => {