perf: have dedicated hook for layout calculations

Author: isekovanic

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -11,7 +11,7 @@ import {
   createClosingPortalLayoutRegistrationId,
   setClosingPortalLayout,
   useShouldTeleportToClosingPortal,
-  useOverlayController,
+  useHasActiveId,
 } from '../../state-store';
 
 type PortalWhileClosingViewProps = {
@@ -32,49 +32,6 @@ type PortalWhileClosingViewProps = {
   portalName: string;
 };
 
-const useSyncingApi = (portalHostName: string, registrationId: string) => {
-  const containerRef = useRef<View | null>(null);
-  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
-  const insets = useSafeAreaInsets();
-  const { id } = useOverlayController();
-
-  const syncPortalLayout = useStableCallback(() => {
-    if (!id) {
-      return;
-    }
-
-    containerRef.current?.measureInWindow((x, y, width, height) => {
-      const absolute = {
-        x,
-        y: y + (Platform.OS === 'android' ? insets.top : 0),
-      };
-
-      if (!width || !height) {
-        return;
-      }
-
-      placeholderLayout.value = { h: height, w: width };
-
-      setClosingPortalLayout(portalHostName, registrationId, {
-        ...absolute,
-        h: height,
-        w: width,
-      });
-    });
-  });
-
-  useEffect(() => {
-    if (id) {
-      syncPortalLayout();
-    }
-  }, [insets.bottom, id, syncPortalLayout]);
-
-  return useMemo(
-    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
-    [placeholderLayout, syncPortalLayout],
-  );
-};
-
 /**
  * Keeps wrapped UI above the message overlay during close animation by teleporting it to a closing portal host.
  *
@@ -153,3 +110,46 @@ export const PortalWhileClosingView = ({
     </>
   );
 };
+
+const useSyncingApi = (portalHostName: string, registrationId: string) => {
+  const containerRef = useRef<View | null>(null);
+  const placeholderLayout = useSharedValue({ h: 0, w: 0 });
+  const insets = useSafeAreaInsets();
+  const hasActiveId = useHasActiveId();
+
+  const syncPortalLayout = useStableCallback(() => {
+    if (!hasActiveId) {
+      return;
+    }
+
+    containerRef.current?.measureInWindow((x, y, width, height) => {
+      const absolute = {
+        x,
+        y: y + (Platform.OS === 'android' ? insets.top : 0),
+      };
+
+      if (!width || !height) {
+        return;
+      }
+
+      placeholderLayout.value = { h: height, w: width };
+
+      setClosingPortalLayout(portalHostName, registrationId, {
+        ...absolute,
+        h: height,
+        w: width,
+      });
+    });
+  });
+
+  useEffect(() => {
+    if (hasActiveId) {
+      syncPortalLayout();
+    }
+  }, [insets.bottom, hasActiveId, syncPortalLayout]);
+
+  return useMemo(
+    () => ({ syncPortalLayout, containerRef, placeholderLayout }),
+    [placeholderLayout, syncPortalLayout],
+  );
+};

package/src/state-store/message-overlay-store.ts

@@ -342,3 +342,11 @@ export const useIsOverlayActive = (id: string) => {
 
   return useStateStore(overlayStore, messageOverlaySelector);
 };
+
+export const activeIdSelector = (nextState: OverlayState) => ({ id: nextState.id });
+
+export const useHasActiveId = () => {
+  const { id } = useStateStore(overlayStore, activeIdSelector);
+
+  return !!id;
+};