From c6f84603ed713bd723397ce67235b98fdcdebc3b Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Sat, 25 Nov 2023 01:24:53 +0200
Subject: [PATCH] refactor: useLayoutEffect instead of useEffect

---
 .../MetaDetails/StreamsList/StreamsList.js    | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index fa59ef669..602baf0f5 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -17,8 +17,8 @@ const StreamsList = ({ className, video, ...props }) => {
     const { core } = useServices();
     const [selectedAddon, setSelectedAddon] = React.useState(ALL_ADDONS_KEY);
     const streamsContainerRef = React.useRef(null);
+    const scrollHeightRef = React.useRef(null);
     const [isScrollable, setIsScrollable] = React.useState(false);
-    const [showBackToTop, setShowBackToTop] = React.useState(false);
     const onAddonSelected = React.useCallback((event) => {
         setSelectedAddon(event.value);
     }, []);
@@ -79,25 +79,13 @@ const StreamsList = ({ className, video, ...props }) => {
             onSelect: onAddonSelected
         };
     }, [streamsByAddon, selectedAddon]);
-    const handleScroll = () => {
-        if (streamsContainerRef.current) {
-            const { scrollTop, scrollHeight, clientHeight } = streamsContainerRef.current;
-            const isScrollable = scrollHeight - clientHeight > 0;
-            setShowBackToTop(scrollTop > 50);
-            setIsScrollable(isScrollable);
-        }
-    };
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         const container = streamsContainerRef.current;
-        handleScroll();
         if (container) {
-            container.addEventListener('scroll', handleScroll);
+            scrollHeightRef.current = container.scrollHeight;
+            const isScrollable = scrollHeightRef.current > container.clientHeight;
+            setIsScrollable(isScrollable);
         }
-        return () => {
-            if (container) {
-                container.removeEventListener('scroll', handleScroll);
-            }
-        };
     }, [streamsByAddon, selectedAddon]);
 
     const scrollToTop = () => {
@@ -173,7 +161,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                         isScrollable && countLoadingAddons === 0 ?
                                             <React.Fragment>
                                                 <hr className={styles['line']} />
-                                                <div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
+                                                <div className={classnames(styles['to-top-wrapper'], isScrollable ? styles['active'] : null)} onClick={scrollToTop}>
                                                     <Icon className={styles['icon']} name={'chevron-up'} />
                                                     <div className={styles['label']}>Back to Top</div>
                                                 </div>