Enhance PopoverWithMeasuredContent with shouldSkipRemeasurement prop to optimize re-measurement logic. Update DatePickerModal and EmojiPicker to utilize the new prop.

Author: kubabutkiewicz

src/components/DatePicker/DatePickerModal.tsx

@@ -73,6 +73,7 @@ function DatePickerModal({
             shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
+            shouldSkipRemeasurement
         >
             <CalendarPicker
                 minDate={minDate}

src/components/EmojiPicker/EmojiPicker.tsx

@@ -216,6 +216,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
             shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
+            shouldSkipRemeasurement
         >
             <FocusTrapForModal active={isEmojiPickerVisible}>
                 <View>

src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

@@ -68,10 +68,13 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r
         }
     }, 300);
 
-    const scrollToHeader = (headerIndex: number) => {
-        const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
-        emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
-    };
+    const scrollToHeader = useCallback(
+        (headerIndex: number) => {
+            const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
+            emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
+        },
+        [emojiListRef],
+    );
 
     /**
      * Given an emoji item object, render a component based on its type.

src/components/PopoverWithMeasuredContent.tsx

@@ -29,6 +29,9 @@ type PopoverWithMeasuredContentProps = Omit<PopoverProps, 'anchorPosition'> & {
 
     /** Whether we should should use top side for the anchor positioning */
     shouldMeasureAnchorPositionFromTop?: boolean;
+
+    /** Whether to skip re-measurement when becoming visible (for components with static dimensions) */
+    shouldSkipRemeasurement?: boolean;
 };
 
 /**
@@ -66,6 +69,7 @@ function PopoverWithMeasuredContent({
     shouldHandleNavigationBack = false,
     shouldEnableNewFocusManagement,
     shouldMeasureAnchorPositionFromTop = false,
+    shouldSkipRemeasurement = false,
     ...props
 }: PopoverWithMeasuredContentProps) {
     const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext);
@@ -75,15 +79,28 @@ function PopoverWithMeasuredContent({
     const [popoverHeight, setPopoverHeight] = useState(popoverDimensions.height);
     const [isContentMeasured, setIsContentMeasured] = useState(popoverWidth > 0 && popoverHeight > 0);
     const prevIsVisible = usePrevious(isVisible);
+    const prevAnchorPosition = usePrevious(anchorPosition);
+    const prevWindowDimensions = usePrevious({windowWidth, windowHeight});
 
     const modalId = useMemo(() => ComposerFocusManager.getId(), []);
 
     if (!prevIsVisible && isVisible && shouldEnableNewFocusManagement) {
         ComposerFocusManager.saveFocusState(modalId);
     }
 
-    if (!prevIsVisible && isVisible && isContentMeasured) {
-        setIsContentMeasured(false);
+    if (!prevIsVisible && isVisible && isContentMeasured && !shouldSkipRemeasurement) {
+        // Check if anything significant changed that would require re-measurement
+        const hasAnchorPositionChanged = !isEqual(prevAnchorPosition, anchorPosition);
+        const hasWindowSizeChanged = !isEqual(prevWindowDimensions, {windowWidth, windowHeight});
+        const hasStaticDimensions = popoverDimensions.width > 0 && popoverDimensions.height > 0;
+
+        // Only reset if:
+        // 1. We don't have static dimensions, OR
+        // 2. The anchor position changed significantly, OR
+        // 3. The window size changed significantly
+        if (!hasStaticDimensions || hasAnchorPositionChanged || hasWindowSizeChanged) {
+            setIsContentMeasured(false);
+        }
     }
 
     /**
@@ -144,28 +161,40 @@ function PopoverWithMeasuredContent({
         };
     }, [anchorPosition, anchorAlignment, popoverWidth, popoverHeight]);
 
-    const horizontalShift = PopoverWithMeasuredContentUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
-    const verticalShift = PopoverWithMeasuredContentUtils.computeVerticalShift(
-        adjustedAnchorPosition.top,
-        popoverHeight,
-        windowHeight,
-        anchorDimensions.height,
-        shouldSwitchPositionIfOverflow,
-    );
-    const shiftedAnchorPosition: PopoverAnchorPosition = {
-        left: adjustedAnchorPosition.left + horizontalShift,
-        ...(shouldMeasureAnchorPositionFromTop ? {top: adjustedAnchorPosition.top + verticalShift} : {}),
-    };
+    // Memoize expensive position calculations
+    const positionCalculations = useMemo(() => {
+        const horizontalShift = PopoverWithMeasuredContentUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
+        const verticalShift = PopoverWithMeasuredContentUtils.computeVerticalShift(
+            adjustedAnchorPosition.top,
+            popoverHeight,
+            windowHeight,
+            anchorDimensions.height,
+            shouldSwitchPositionIfOverflow,
+        );
+        return {horizontalShift, verticalShift};
+    }, [adjustedAnchorPosition.left, adjustedAnchorPosition.top, popoverWidth, popoverHeight, windowWidth, windowHeight, anchorDimensions.height, shouldSwitchPositionIfOverflow]);
+
+    const shiftedAnchorPosition: PopoverAnchorPosition = useMemo(() => {
+        const result: PopoverAnchorPosition = {
+            left: adjustedAnchorPosition.left + positionCalculations.horizontalShift,
+        };
 
-    if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
-        const top = adjustedAnchorPosition.top + verticalShift;
-        const maxTop = windowHeight - popoverHeight - verticalShift;
-        shiftedAnchorPosition.top = Math.min(Math.max(verticalShift, top), maxTop);
-    }
+        if (shouldMeasureAnchorPositionFromTop) {
+            result.top = adjustedAnchorPosition.top + positionCalculations.verticalShift;
+        }
 
-    if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM) {
-        shiftedAnchorPosition.bottom = windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift;
-    }
+        if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
+            const top = adjustedAnchorPosition.top + positionCalculations.verticalShift;
+            const maxTop = windowHeight - popoverHeight - positionCalculations.verticalShift;
+            result.top = Math.min(Math.max(positionCalculations.verticalShift, top), maxTop);
+        }
+
+        if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM) {
+            result.bottom = windowHeight - (adjustedAnchorPosition.top + popoverHeight) - positionCalculations.verticalShift;
+        }
+
+        return result;
+    }, [adjustedAnchorPosition, positionCalculations, anchorAlignment.vertical, windowHeight, popoverHeight, shouldMeasureAnchorPositionFromTop]);
 
     return isContentMeasured ? (
         <Popover

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -373,12 +373,29 @@ function ReportActionCompose({
     // eslint-disable-next-line react-compiler/react-compiler
     onSubmitAction = handleSendMessage;
 
+    const emojiPositionValues = useMemo(
+        () => ({
+            secondaryRowHeight: styles.chatItemComposeSecondaryRow.height,
+            secondaryRowMarginTop: styles.chatItemComposeSecondaryRow.marginTop,
+            secondaryRowMarginBottom: styles.chatItemComposeSecondaryRow.marginBottom,
+            composeBoxMinHeight: styles.chatItemComposeBox.minHeight,
+            emojiButtonHeight: styles.chatItemEmojiButton.height,
+        }),
+        [
+            styles.chatItemComposeSecondaryRow.height,
+            styles.chatItemComposeSecondaryRow.marginTop,
+            styles.chatItemComposeSecondaryRow.marginBottom,
+            styles.chatItemComposeBox.minHeight,
+            styles.chatItemEmojiButton.height,
+        ],
+    );
+
     const emojiShiftVertical = useMemo(() => {
-        const chatItemComposeSecondaryRowHeight = styles.chatItemComposeSecondaryRow.height + styles.chatItemComposeSecondaryRow.marginTop + styles.chatItemComposeSecondaryRow.marginBottom;
-        const reportActionComposeHeight = styles.chatItemComposeBox.minHeight + chatItemComposeSecondaryRowHeight;
-        const emojiOffsetWithComposeBox = (styles.chatItemComposeBox.minHeight - styles.chatItemEmojiButton.height) / 2;
+        const chatItemComposeSecondaryRowHeight = emojiPositionValues.secondaryRowHeight + emojiPositionValues.secondaryRowMarginTop + emojiPositionValues.secondaryRowMarginBottom;
+        const reportActionComposeHeight = emojiPositionValues.composeBoxMinHeight + chatItemComposeSecondaryRowHeight;
+        const emojiOffsetWithComposeBox = (emojiPositionValues.composeBoxMinHeight - emojiPositionValues.emojiButtonHeight) / 2;
         return reportActionComposeHeight - emojiOffsetWithComposeBox - CONST.MENU_POSITION_REPORT_ACTION_COMPOSE_BOTTOM;
-    }, [styles]);
+    }, [emojiPositionValues]);
 
     const validateMaxLength = useCallback(
         (value: string) => {