Replaced some passive effects with layout effects to avoid flash of overflowed owners
Brian Vaughn committed
Apr 7, 2019 at 10:01 UTC
5b6dbb8dd7490604ac508a5f7dbee67ce916e1b6
1 file changed
+8
-10
src/devtools/views/Components/OwnersStack.js
+8
-10
@@ -2,7 +2,7 @@
2
import React, {
3
useCallback,
4
useContext,
5
- useEffect,
5
+ useLayoutEffect,
6
useState,
7
createRef,
8
forwardRef,
@@ -31,7 +31,7 @@ function ElementsDropdown({
31
setIsDropdownVisible(!isDropdownVisible);
32
}, [isDropdownVisible, setIsDropdownVisible]);
33
34
- useEffect(() => {
34
+ useLayoutEffect(() => {
35
setIsDropdownVisible(false);
36
// eslint-disable-next-line react-hooks/exhaustive-deps
37
}, [selectedElementIndex]);
@@ -111,7 +111,7 @@ export default function OwnerStack() {
111
<ElementView key={id} id={id} index={index} />
112
));
113
114
- useEffect(() => {
114
+ useLayoutEffect(() => {
115
if (elementsBarRef.current === null) {
116
return () => {};
117
}
@@ -161,16 +161,15 @@ function useElementsBarOverflowing(
161
elementsTotalWidth: number,
162
callback: Function
163
) {
164
- useEffect(() => {
165
- const handleResize = () => {
164
+ useLayoutEffect(() => {
165
+ const handleResize = throttle(() => {
166
let isElementsBarOverflowing = false;
167
if (elementsBarRef.current !== null) {
168
const elementsBarWidth = elementsBarRef.current.clientWidth;
169
isElementsBarOverflowing = elementsBarWidth <= elementsTotalWidth;
170
}
171
callback(isElementsBarOverflowing);
172
- };
173
- const debounceHandleResize = throttle(handleResize, 100);
172
+ }, 100);
173
174
handleResize();
175
@@ -178,8 +177,7 @@ function useElementsBarOverflowing(
177
// Here we use portals to render individual tabs (e.g. Profiler),
178
// and the root document might belong to a different window.
179
const ownerWindow = elementsBarRef.current.ownerDocument.defaultView;
181
- ownerWindow.addEventListener('resize', debounceHandleResize);
182
- return () =>
183
- ownerWindow.removeEventListener('resize', debounceHandleResize);
180
+ ownerWindow.addEventListener('resize', handleResize);
181
+ return () => ownerWindow.removeEventListener('resize', handleResize);
182
}, [elementsBarRef, elementsTotalWidth, callback]);
183
}