Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve ActiveHoverable CPU performance #54744

Merged
merged 4 commits into from
Jan 24, 2025
+53 −93
Merged

Improve ActiveHoverable CPU performance #54744

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
118212b
improve ActiveHoverable CPU performance
zirgulis Jan 2, 2025
41df088
Merge branch 'main' of github.com:callstack-internal/Expensify-App in…
zirgulis Jan 9, 2025
a8a191c
fix hover close
zirgulis Jan 10, 2025
a1e4533
fix eslint error
zirgulis Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 53 additions & 93 deletions src/components/Hoverable/ActiveHoverable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,141 +15,101 @@ type OnMouseEvents = Record<MouseEvents, (e: MouseEvent) => void>;

function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
const [isHovered, setIsHovered] = useState(false);

const elementRef = useRef<HTMLElement | null>(null);
const isScrollingRef = useRef(false);
const isHoveredRef = useRef(false);
const isVisibiltyHidden = useRef(false);
const isVisibilityHidden = useRef(false);

const updateIsHovered = useCallback(
(hovered: boolean) => {
if (shouldFreezeCapture) {
return;
}

isHoveredRef.current = hovered;
// Nullish coalescing operator (`??`) wouldn't be appropriate here because
// it's not a matter of providing a default when encountering `null` or `undefined`
// but rather making a decision based on the truthy nature of the complete expressions.
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if ((shouldHandleScroll && isScrollingRef.current) || shouldFreezeCapture) {
isVisibilityHidden.current = false;

if (shouldHandleScroll && isScrollingRef.current) {
return;
}

setIsHovered(hovered);

if (hovered) {
onHoverIn?.();
} else {
onHoverOut?.();
}
},
[shouldHandleScroll, shouldFreezeCapture],
[shouldHandleScroll, shouldFreezeCapture, onHoverIn, onHoverOut],
);

useEffect(() => {
if (isHovered) {
onHoverIn?.();
} else {
onHoverOut?.();
}
}, [isHovered, onHoverIn, onHoverOut]);

useEffect(() => {
if (!shouldHandleScroll) {
return;
}

const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling: boolean) => {
isScrollingRef.current = scrolling;
if (!isScrollingRef.current) {
setIsHovered(isHoveredRef.current);
if (scrolling && isHovered) {
setIsHovered(false);
onHoverOut?.();
} else if (!scrolling && elementRef.current?.matches(':hover')) {
setIsHovered(true);
onHoverIn?.();
}
});

return () => scrollingListener.remove();
}, [shouldHandleScroll]);
}, [shouldHandleScroll, isHovered, onHoverIn, onHoverOut]);

useEffect(() => {
// Do not mount a listener if the component is not hovered
if (!isHovered) {
return;
}

/**
* Checks the hover state of a component and updates it based on the event target.
* This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger,
* such as when an element is removed before the mouseleave event is triggered.
* @param event The hover event object.
*/
const unsetHoveredIfOutside = (event: MouseEvent) => {
// We're also returning early if shouldFreezeCapture is true in order
// to not update the hover state but keep it frozen.
if (!elementRef.current || elementRef.current.contains(event.target as Node) || shouldFreezeCapture) {
return;
const handleVisibilityChange = () => {
if (document.visibilityState === 'hidden') {
isVisibilityHidden.current = true;
setIsHovered(false);
} else {
isVisibilityHidden.current = false;
}

setIsHovered(false);
};

document.addEventListener('mouseover', unsetHoveredIfOutside, true);

return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
}, [isHovered, elementRef, shouldFreezeCapture]);
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, []);

useEffect(() => {
const unsetHoveredWhenDocumentIsHidden = () => {
if (document.visibilityState !== 'hidden') {
const handleMouseEvents = useCallback(
(type: 'enter' | 'leave' | 'blur') => () => {
if (shouldFreezeCapture) {
return;
}

isVisibiltyHidden.current = true;
setIsHovered(false);
};

document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
const newHoverState = type === 'enter';
isHoveredRef.current = newHoverState;
isVisibilityHidden.current = false;

return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
}, []);
updateIsHovered(newHoverState);
},
[shouldFreezeCapture, updateIsHovered],
);

const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]);
const child = useMemo(() => getReturnValue(children, isHovered), [children, isHovered]);

const {onMouseEnter, onMouseLeave, onMouseMove, onBlur} = child.props as OnMouseEvents;
const {onMouseEnter, onMouseLeave, onBlur} = child.props as OnMouseEvents;

const hoverAndForwardOnMouseEnter = useCallback(
(e: MouseEvent) => {
isVisibiltyHidden.current = false;
updateIsHovered(true);
return cloneElement(child, {
ref: mergeRefs(elementRef, outerRef, child.ref),
onMouseEnter: (e: MouseEvent) => {
handleMouseEvents('enter')();
onMouseEnter?.(e);
},
[updateIsHovered, onMouseEnter],
);

const unhoverAndForwardOnMouseLeave = useCallback(
(e: MouseEvent) => {
updateIsHovered(false);
onMouseLeave: (e: MouseEvent) => {
handleMouseEvents('leave')();
onMouseLeave?.(e);
},
[updateIsHovered, onMouseLeave],
);

const unhoverAndForwardOnBlur = useCallback(
(event: MouseEvent) => {
// Check if the blur event occurred due to clicking outside the element
// and the wrapperView contains the element that caused the blur and reset isHovered
if (!elementRef.current?.contains(event.target as Node) && !elementRef.current?.contains(event.relatedTarget as Node) && !shouldFreezeCapture) {
setIsHovered(false);
}
Comment on lines -129 to -131
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removing this logic caused a regression here #57022, we fix it removing the whole logic for onblur, as it was no longer relevant.


onBlur?.(event);
},
[onBlur, shouldFreezeCapture],
);

const handleAndForwardOnMouseMove = useCallback(
(e: MouseEvent) => {
isVisibiltyHidden.current = false;
updateIsHovered(true);
onMouseMove?.(e);
onBlur: (e: MouseEvent) => {
handleMouseEvents('blur')();
onBlur?.(e);
},
[updateIsHovered, onMouseMove],
);

return cloneElement(child, {
ref: mergeRefs(elementRef, outerRef, child.ref),
onMouseEnter: hoverAndForwardOnMouseEnter,
onMouseLeave: unhoverAndForwardOnMouseLeave,
onBlur: unhoverAndForwardOnBlur,
...(isVisibiltyHidden.current ? {onMouseMove: handleAndForwardOnMouseMove} : {}),
});
}

Expand Down
Loading