From 2e56fbd2476d5b4f787d7661b55e13b9dd0a751d Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 25 Jul 2023 11:46:24 +0530
Subject: [PATCH] [Tabs] Refactor IntersectionObserver logic (#38133)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 packages/mui-material/src/Tabs/Tabs.js | 56 ++++++++++----------------
 1 file changed, 22 insertions(+), 34 deletions(-)

diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
index c68f8518422260..12a9f9ba9fa24e 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -604,33 +604,8 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
    * Using IntersectionObserver on first and last Tabs.
    */
   React.useEffect(() => {
-    let firstObserver;
-    let lastObserver;
     const tabListChildren = Array.from(tabListRef.current.children);
     const length = tabListChildren.length;
-    const firstTab = tabListChildren[0];
-    const lastTab = tabListChildren[length - 1];
-    const threshold = 0.99;
-    const observerOptions = {
-      root: tabsRef.current,
-      threshold,
-    };
-
-    const handleScrollButtonStart = (entries) => {
-      let display = false;
-      entries.forEach(({ isIntersecting }) => {
-        display = !isIntersecting;
-      });
-      setDisplayStartScroll(display);
-    };
-
-    const handleScrollButtonEnd = (entries) => {
-      let display = false;
-      entries.forEach(({ isIntersecting }) => {
-        display = !isIntersecting;
-      });
-      setDisplayEndScroll(display);
-    };
 
     if (
       typeof IntersectionObserver !== 'undefined' &&
@@ -638,19 +613,32 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
       scrollable &&
       scrollButtons !== false
     ) {
-      firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      const firstTab = tabListChildren[0];
+      const lastTab = tabListChildren[length - 1];
+      const observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99,
+      };
+
+      const handleScrollButtonStart = (entries) => {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
       firstObserver.observe(firstTab);
 
-      if (length > 1) {
-        lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
-        lastObserver.observe(lastTab);
-      }
+      const handleScrollButtonEnd = (entries) => {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+
+      return () => {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
     }
 
-    return () => {
-      firstObserver?.disconnect();
-      lastObserver?.disconnect();
-    };
+    return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
 
   React.useEffect(() => {