From 9882680233de77bb38e378da8b369cb229cffc8d Mon Sep 17 00:00:00 2001
From: Junhyeong Ahn <rkdrnf@gmail.com>
Date: Fri, 10 Mar 2023 14:31:44 +0900
Subject: [PATCH 1/3] use local element reference instead of referencing node
 inside timeout

---
 packages/mui-material/src/Tabs/ScrollbarSize.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js
index 2811d02180205d..583438d9262cc4 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.js
@@ -21,21 +21,22 @@ export default function ScrollbarSize(props) {
   const scrollbarHeight = React.useRef();
   const nodeRef = React.useRef(null);
 
-  const setMeasurements = () => {
-    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
+  const setMeasurements = (element) => {
+    scrollbarHeight.current = element.offsetHeight - element.clientHeight;
   };
 
   React.useEffect(() => {
+    const element = nodeRef.current
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
-      setMeasurements();
+      setMeasurements(element);
 
       if (prevHeight !== scrollbarHeight.current) {
         onChange(scrollbarHeight.current);
       }
     });
 
-    const containerWindow = ownerWindow(nodeRef.current);
+    const containerWindow = ownerWindow(element);
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();

From 8bc1cb5c2466a18cb0d5906a8985199926ab1181 Mon Sep 17 00:00:00 2001
From: Junhyeong Ahn <rkdrnf@gmail.com>
Date: Fri, 10 Mar 2023 15:45:17 +0900
Subject: [PATCH 2/3] fixed test

---
 packages/mui-material/src/Tabs/ScrollbarSize.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js
index 583438d9262cc4..d03324afad6864 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.js
@@ -26,7 +26,7 @@ export default function ScrollbarSize(props) {
   };
 
   React.useEffect(() => {
-    const element = nodeRef.current
+    const element = nodeRef.current;
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
       setMeasurements(element);
@@ -45,7 +45,7 @@ export default function ScrollbarSize(props) {
   }, [onChange]);
 
   React.useEffect(() => {
-    setMeasurements();
+    setMeasurements(nodeRef.current);
     onChange(scrollbarHeight.current);
   }, [onChange]);
 

From 5ded5a2443797c50b3ba2e2c3b88da3a6267f6e2 Mon Sep 17 00:00:00 2001
From: Junhyeong Ahn <rkdrnf@gmail.com>
Date: Tue, 14 Mar 2023 12:20:12 +0900
Subject: [PATCH 3/3] use synchronous effect

---
 packages/mui-material/src/Tabs/ScrollbarSize.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/mui-material/src/Tabs/ScrollbarSize.js b/packages/mui-material/src/Tabs/ScrollbarSize.js
index d03324afad6864..edea6b1620db1c 100644
--- a/packages/mui-material/src/Tabs/ScrollbarSize.js
+++ b/packages/mui-material/src/Tabs/ScrollbarSize.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
-import { ownerWindow } from '../utils';
+import { ownerWindow, unstable_useEnhancedEffect as useEnhancedEffect } from '../utils';
 
 const styles = {
   width: 99,
@@ -21,22 +21,21 @@ export default function ScrollbarSize(props) {
   const scrollbarHeight = React.useRef();
   const nodeRef = React.useRef(null);
 
-  const setMeasurements = (element) => {
-    scrollbarHeight.current = element.offsetHeight - element.clientHeight;
+  const setMeasurements = () => {
+    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
 
-  React.useEffect(() => {
-    const element = nodeRef.current;
+  useEnhancedEffect(() => {
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
-      setMeasurements(element);
+      setMeasurements();
 
       if (prevHeight !== scrollbarHeight.current) {
         onChange(scrollbarHeight.current);
       }
     });
 
-    const containerWindow = ownerWindow(element);
+    const containerWindow = ownerWindow(nodeRef.current);
     containerWindow.addEventListener('resize', handleResize);
     return () => {
       handleResize.clear();
@@ -45,7 +44,7 @@ export default function ScrollbarSize(props) {
   }, [onChange]);
 
   React.useEffect(() => {
-    setMeasurements(nodeRef.current);
+    setMeasurements();
     onChange(scrollbarHeight.current);
   }, [onChange]);