perf: narrow useCloseOnModalCover to a derived boolean selector

Author: TaduJR

src/components/PopoverMenu/v2/content/useCloseOnModalCover.ts

@@ -1,15 +1,13 @@
+import {isModalCoveringSelector} from '@selectors/Modal';
 import {useEffect, useRef} from 'react';
 import useOnyx from '@hooks/useOnyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 function useCloseOnModalCover(isVisible: boolean, close: () => void): void {
-    const [modal, modalMeta] = useOnyx(ONYXKEYS.MODAL);
+    const [isCovered, modalMeta] = useOnyx(ONYXKEYS.MODAL, {selector: isModalCoveringSelector});
     const isLoaded = modalMeta.status === 'loaded';
-    const isCovered = !!modal?.willAlertModalBecomeVisible && !modal?.isPopover;
-    // Seed with current value: mounting inside an already-covered modal isn't a fresh cover.
     const wasCoveredRef = useRef(isCovered);
     useEffect(() => {
-        // Onyx hydration can flip undefined→true with a stale cover from a prior modal; wait for the loaded snapshot.
         if (!isLoaded) {
             return;
         }

src/selectors/Modal.ts

@@ -6,4 +6,6 @@ const willAlertModalBecomeVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.
 
 const isRHPVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
 
-export {willAlertModalBecomeVisibleSelector, isRHPVisibleSelector};
+const isModalCoveringSelector = (modal: OnyxEntry<Modal>) => !!modal?.willAlertModalBecomeVisible && !modal?.isPopover;
+
+export {willAlertModalBecomeVisibleSelector, isRHPVisibleSelector, isModalCoveringSelector};

tests/unit/PopoverMenuV2Test.tsx

@@ -138,14 +138,15 @@ const mockModalState: {
 jest.mock('@hooks/useOnyx', () => {
     /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return -- jest.requireActual returns an untyped module; standard RN-mock pattern in this repo. */
     const ReactActual = jest.requireActual('react');
-    return () => {
+    return (_key: string, options?: {selector?: (v: unknown) => unknown}) => {
         const [, force] = ReactActual.useState({});
         ReactActual.useEffect(() => {
             const listener = () => force({});
             mockModalState.listeners.add(listener);
             return () => mockModalState.listeners.delete(listener);
         }, []);
-        return [mockModalState.value, {status: 'loaded'}];
+        const value = options?.selector ? options.selector(mockModalState.value) : mockModalState.value;
+        return [value, {status: 'loaded'}];
     };
 });
 

tests/unit/createContextNamespaceTest.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@testing-library/react-native';
-import React, {useImperativeHandle} from 'react';
-import type {Ref} from 'react';
+import React, {use, useImperativeHandle} from 'react';
+import type {Context, Ref} from 'react';
 import Text from '@components/Text';
 import createContextNamespace from '@hooks/createContextNamespace';
 
@@ -14,10 +14,10 @@ function Consumer() {
     return <Text>{value.label}</Text>;
 }
 
-type CaptureHandle<T> = {value: T};
+type CaptureHandle<T> = {value: T | null};
 
-function CaptureConsumer<T>({useCtx, consumerName, captureRef}: {useCtx: (consumerName: string) => T; consumerName: string; captureRef: Ref<CaptureHandle<T>>}) {
-    const value = useCtx(consumerName);
+function CaptureConsumer<T>({context, captureRef}: {context: Context<T | null>; captureRef: Ref<CaptureHandle<T>>}) {
+    const value = use(context);
     useImperativeHandle(captureRef, () => ({value}), [value]);
     return null;
 }
@@ -60,8 +60,7 @@ describe('createContextNamespace', () => {
         render(
             <FooContext value={value}>
                 <CaptureConsumer<FooValue>
-                    useCtx={useFoo}
-                    consumerName="useFoo"
+                    context={FooContext}
                     captureRef={captureRef}
                 />
             </FooContext>,
@@ -70,13 +69,12 @@ describe('createContextNamespace', () => {
     });
 
     it('does NOT throw when the value is a falsy-but-non-null primitive (e.g. 0)', () => {
-        const [ZeroContext, useZero] = createContextNamespace('ZeroRoot')<number>();
+        const [ZeroContext] = createContextNamespace('ZeroRoot')<number>();
         const captureRef = React.createRef<CaptureHandle<number>>();
         render(
             <ZeroContext value={0}>
                 <CaptureConsumer<number>
-                    useCtx={useZero}
-                    consumerName="useZero"
+                    context={ZeroContext}
                     captureRef={captureRef}
                 />
             </ZeroContext>,