Memoize hooks and sanitize options trim

useInAppBrowser: add useCallback/useMemo to memoize runTracked, open, openAuth and the returned object, ensuring stable identities for consumers (e.g. useEffect deps or React.memo). Also update import list and docs to clarify memoization behavior.\n\nutils/options: enhance trimStringFields to treat explicit undefined, non-string own properties, and extra enumerable keys as mutations (uses ownKeyCount and `key in source`), returning null only when the input is already bridge-safe; improves sanitization before crossing the bridge.

Author: mCodex

src/hooks/useInAppBrowser.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import {
   close as nativeClose,
@@ -59,9 +59,10 @@ const toError = (err: unknown): Error =>
  * APIs with loading and error state tracking. `close`, `closeAuth`, and
  * `isAvailable` are direct delegates to the stateless module API.
  *
- * Memoization is handled by the React Compiler at build time, so the returned
- * object identity is stable across re-renders without manual `useCallback` /
- * `useMemo` wrappers.
+ * `open`/`openAuth` and the returned object are memoized with `useCallback` /
+ * `useMemo` so consumers passing them to `useEffect` deps or `React.memo`
+ * children get stable identities — independent of whether the host app has
+ * `babel-plugin-react-compiler` enabled.
  */
 export const useInAppBrowser = (): UseInAppBrowserReturn => {
   const [isLoading, setIsLoading] = useState(false)
@@ -77,38 +78,47 @@ export const useInAppBrowser = (): UseInAppBrowserReturn => {
     }
   }, [])
 
-  const runTracked = async <T>(fn: () => Promise<T>): Promise<T> => {
-    if (isMountedRef.current) {
-      setIsLoading(true)
-      setError(null)
-    }
-    try {
-      return await fn()
-    } catch (err) {
-      const next = toError(err)
-      if (isMountedRef.current) setError(next)
-      throw next
-    } finally {
-      if (isMountedRef.current) setIsLoading(false)
-    }
-  }
+  const runTracked = useCallback(
+    async <T>(fn: () => Promise<T>): Promise<T> => {
+      if (isMountedRef.current) {
+        setIsLoading(true)
+        setError(null)
+      }
+      try {
+        return await fn()
+      } catch (err) {
+        const next = toError(err)
+        if (isMountedRef.current) setError(next)
+        throw next
+      } finally {
+        if (isMountedRef.current) setIsLoading(false)
+      }
+    },
+    []
+  )
 
-  const open = (url: string, options?: InAppBrowserOptions) =>
-    runTracked(() => nativeOpen(url, options))
+  const open = useCallback(
+    (url: string, options?: InAppBrowserOptions) =>
+      runTracked(() => nativeOpen(url, options)),
+    [runTracked]
+  )
 
-  const openAuth = (
-    url: string,
-    redirectUrl: string,
-    options?: InAppBrowserOptions
-  ) => runTracked(() => nativeOpenAuth(url, redirectUrl, options))
+  const openAuth = useCallback(
+    (url: string, redirectUrl: string, options?: InAppBrowserOptions) =>
+      runTracked(() => nativeOpenAuth(url, redirectUrl, options)),
+    [runTracked]
+  )
 
-  return {
-    open,
-    openAuth,
-    close: nativeClose,
-    closeAuth: nativeCloseAuth,
-    isAvailable: nativeIsAvailable,
-    isLoading,
-    error,
-  }
+  return useMemo<UseInAppBrowserReturn>(
+    () => ({
+      open,
+      openAuth,
+      close: nativeClose,
+      closeAuth: nativeCloseAuth,
+      isAvailable: nativeIsAvailable,
+      isLoading,
+      error,
+    }),
+    [open, openAuth, isLoading, error]
+  )
 }

src/utils/options.ts

@@ -26,28 +26,29 @@ const ANIMATION_KEYS = [
 ] as const satisfies readonly (keyof BrowserAnimations)[]
 
 /**
- * Whitelist-trim string fields. Returns `null` when no mutation was required
- * (caller can keep its original reference); otherwise returns the new payload
- * (or `undefined` when every entry was dropped).
+ * Whitelist-trim string fields. Returns `null` when the input was already
+ * bridge-safe (caller can keep its original reference); otherwise returns the
+ * new payload (or `undefined` when every entry was dropped).
+ *
+ * "Bridge-safe" means: every own property is a non-empty trimmed string AND
+ * is in the whitelist. Any explicit `undefined`, non-string value, or extra
+ * enumerable key forces a fresh object so the value crossing JSI is clean.
  */
 const trimStringFields = <T extends object>(
   source: T,
   keys: readonly (keyof T)[]
 ): T | undefined | null => {
+  const ownKeyCount = Object.keys(source).length
   let out: Partial<T> | null = null
   let mutated = false
   let kept = 0
-  let originalKeyCount = 0
-
-  for (const key of Object.keys(source) as (keyof T)[]) {
-    const v = source[key]
-    if (v !== undefined) originalKeyCount++
-  }
 
   for (const key of keys) {
     const value = source[key]
     if (typeof value !== 'string') {
-      if (value !== undefined) mutated = true
+      // Any own non-string property (including explicit `undefined`) needs
+      // to be stripped before bridging.
+      if (key in source) mutated = true
       continue
     }
     const trimmed = value.trim()
@@ -61,7 +62,8 @@ const trimStringFields = <T extends object>(
     kept++
   }
 
-  if (!mutated && kept === originalKeyCount) return null
+  // Extra (non-whitelisted) own keys also require sanitization.
+  if (!mutated && kept === ownKeyCount) return null
   return out ? (compact(out) as T | undefined) : undefined
 }