@react-navigation/core 7.13.6 → 8.0.0-alpha.0

package/src/useNavigationState.tsx

@@ -3,31 +3,106 @@ import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
 
-type Selector<ParamList extends ParamListBase, T> = (
-  state: NavigationState<ParamList>
-) => T;
+import type {
+  NavigationListForNested,
+  NavigationProp,
+  RootNavigator,
+} from './types';
+import { useNavigation } from './useNavigation';
+
+type NavigationStateListener = {
+  getState: () => NavigationState<ParamListBase>;
+  subscribe: (callback: () => void) => () => void;
+};
+
+type NavigationStateForNested<
+  Navigator,
+  RouteName extends keyof NavigationListForNested<Navigator>,
+> = NavigationListForNested<Navigator>[RouteName] extends {
+  getState: () => infer State;
+}
+  ? State
+  : never;
 
 /**
  * Hook to get a value from the current navigation state using a selector.
  *
- * @param selector Selector function to get a value from the state.
+ * If the route name of the current or one of the parents is specified,
+ * the navigation state of the navigator for that route is used.
+ *
+ * A selector function must be provided to select the desired value from the navigation state.
  */
-export function useNavigationState<ParamList extends ParamListBase, T>(
-  selector: Selector<ParamList, T>
-): T {
-  const stateListener = React.useContext(NavigationStateListenerContext);
+export function useNavigationState<
+  const T,
+  const Navigator = RootNavigator,
+  const RouteName extends
+    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+>(
+  routeName: RouteName,
+  selector: (state: NavigationStateForNested<Navigator, RouteName>) => T
+): T;
+export function useNavigationState<T>(
+  selector: (state: NavigationState<ParamListBase>) => T
+): T;
+export function useNavigationState(...args: unknown[]): unknown {
+  let navigation: NavigationProp<ParamListBase> | undefined,
+    stateListener: NavigationStateListener | undefined,
+    selector;
+
+  if (typeof args[0] === 'string') {
+    // `useNavigation` uses `use` internally, so it's fine to call it conditionally
+    // @ts-expect-error we can't specify the type here
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    navigation = useNavigation(args[0]);
+    selector = args[1];
+  } else {
+    selector = args[0];
+  }
+
+  if (navigation == null) {
+    stateListener = React.use(NavigationStateListenerContext);
+
+    if (stateListener == null) {
+      throw new Error(
+        "Couldn't get the navigation state. Is your component inside a navigator?"
+      );
+    }
+  }
+
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      if (navigation) {
+        return navigation.addListener('state', callback);
+      } else if (stateListener) {
+        return stateListener.subscribe(callback);
+      } else {
+        throw new Error(
+          "Couldn't subscribe to navigation state changes. This is not expected."
+        );
+      }
+    },
+    [navigation, stateListener]
+  );
 
-  if (stateListener == null) {
+  const getSnapshot = navigation
+    ? navigation.getState
+    : stateListener?.getState;
+
+  if (getSnapshot == null) {
+    throw new Error("Couldn't get the navigation state. This is not expected.");
+  }
+
+  if (typeof selector !== 'function') {
     throw new Error(
-      "Couldn't get the navigation state. Is your component inside a navigator?"
+      `A selector function must be provided (got ${typeof selector}).`
     );
   }
 
   const value = useSyncExternalStoreWithSelector(
-    stateListener.subscribe,
-    // @ts-expect-error: this is unsafe, but needed to make the generic work
-    stateListener.getState,
-    stateListener.getState,
+    subscribe,
+    getSnapshot,
+    getSnapshot,
+    // @ts-expect-error we can't infer the type here
     selector
   );
 
@@ -73,9 +148,5 @@ export function NavigationStateListenerProvider({
 }
 
 const NavigationStateListenerContext = React.createContext<
-  | {
-      getState: () => NavigationState<ParamListBase>;
-      subscribe: (callback: () => void) => () => void;
-    }
-  | undefined
+  NavigationStateListener | undefined
 >(undefined);

package/src/useOnAction.tsx

@@ -7,7 +7,6 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChildContext';
 import {
   type ChildActionListener,
   type ChildBeforeRemoveListener,
@@ -53,9 +52,6 @@ export function useOnAction({
     addListener: addListenerParent,
     onDispatchAction,
   } = React.useContext(NavigationBuilderContext);
-  const navigationInChildEnabled = React.useContext(
-    DeprecatedNavigationInChildContext
-  );
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
@@ -131,14 +127,8 @@ export function useOnAction({
         }
       }
 
-      if (
-        typeof action.target === 'string' ||
-        // For backward compatibility
-        action.type === 'NAVIGATE_DEPRECATED' ||
-        navigationInChildEnabled
-      ) {
+      if (typeof action.target === 'string') {
         // If the action wasn't handled by current navigator or a parent navigator, let children handle it
-        // Handling this when target isn't specified is deprecated and will be removed in the future
         for (let i = actionListeners.length - 1; i >= 0; i--) {
           const listener = actionListeners[i];
 
@@ -155,7 +145,6 @@ export function useOnAction({
       beforeRemoveListeners,
       emitter,
       getState,
-      navigationInChildEnabled,
       key,
       onActionParent,
       onDispatchAction,

package/src/useOnGetState.tsx

@@ -6,7 +6,7 @@ import {
   type GetStateListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
-import { NavigationRouteContext } from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationProvider';
 
 type Options = {
   getState: () => NavigationState;

package/src/useOnPreventRemove.tsx

@@ -8,7 +8,7 @@ import {
   type ChildBeforeRemoveListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
-import { NavigationRouteContext } from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 

package/src/useRoute.tsx

@@ -1,22 +1,67 @@
 import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationRouteContext } from './NavigationRouteContext';
-import type { RouteProp } from './types';
+import {
+  NamedRouteContextListContext,
+  NavigationRouteContext,
+} from './NavigationProvider';
+import type { RootParamList, RouteForName, RouteProp } from './types';
+
+/**
+ * Get all possible route names from a param list and its nested navigators.
+ */
+type AllRouteNames<ParamList extends {}> = RouteForName<
+  ParamList,
+  string
+>['name'];
 
 /**
  * Hook to access the route prop of the parent screen anywhere.
  *
  * @returns Route prop of the parent screen.
  */
-export function useRoute<T extends RouteProp<ParamListBase>>(): T {
-  const route = React.useContext(NavigationRouteContext);
+export function useRoute<
+  const ParamList extends {} = RootParamList,
+  const RouteName extends AllRouteNames<ParamList> = AllRouteNames<ParamList>,
+>(name: RouteName): RouteForName<ParamList, RouteName>;
+export function useRoute<
+  const ParamList extends {} = RootParamList,
+>(): {} extends ParamList
+  ? RouteProp<ParamListBase>
+  : ParamList extends ParamListBase
+    ? RouteForName<ParamList, string>
+    : RouteProp<ParamListBase>;
+
+export function useRoute(name?: string) {
+  if (name === undefined) {
+    const route = React.use(NavigationRouteContext);
+
+    if (route === undefined) {
+      throw new Error(
+        "Couldn't find a route object. Is your component inside a screen in a navigator?"
+      );
+    }
+
+    return route;
+  }
 
-  if (route === undefined) {
+  const NamedRouteContextList = React.use(NamedRouteContextListContext);
+
+  if (NamedRouteContextList === undefined) {
     throw new Error(
-      "Couldn't find a route object. Is your component inside a screen in a navigator?"
+      "Couldn't find a parent screen. Is your component inside a screen in a navigator?"
     );
   }
 
-  return route as T;
+  const NamedRouteContext = NamedRouteContextList[name];
+
+  if (NamedRouteContext === undefined) {
+    throw new Error(
+      `Couldn't find a route named '${name}' in any of the parent screens. Is your component inside the correct screen?`
+    );
+  }
+
+  const route = React.use(NamedRouteContext);
+
+  return route;
 }

package/src/useScheduleUpdate.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
-import { useClientLayoutEffect } from './useClientLayoutEffect';
 
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
@@ -19,5 +18,5 @@ export function useScheduleUpdate(callback: () => void) {
   // However, since we are using sync store, it might be fine
   scheduleUpdate(callback);
 
-  useClientLayoutEffect(flushUpdates);
+  React.useLayoutEffect(flushUpdates);
 }

package/src/useSyncState.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
 import { deepFreeze } from './deepFreeze';
+import { useLazyValue } from './useLazyValue';
 
 const createStore = <T,>(getInitialState: () => T) => {
-  const listeners: (() => void)[] = [];
+  const listeners = new Set<() => void>();
 
   let initialized = false;
   let state: T;
@@ -33,14 +34,10 @@ const createStore = <T,>(getInitialState: () => T) => {
   };
 
   const subscribe = (callback: () => void) => {
-    listeners.push(callback);
+    listeners.add(callback);
 
     return () => {
-      const index = listeners.indexOf(callback);
-
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
+      listeners.delete(callback);
     };
   };
 
@@ -64,15 +61,31 @@ const createStore = <T,>(getInitialState: () => T) => {
 };
 
 export function useSyncState<T>(getInitialState: () => T) {
-  const store = React.useRef(createStore(getInitialState)).current;
+  const store = useLazyValue(() => createStore(getInitialState));
 
-  const state = React.useSyncExternalStore(
-    store.subscribe,
-    store.getState,
-    store.getState
+  // Use a reducer with `store.getState` to always have the latest state
+  const [state, rerender] = React.useReducer(
+    (_) => store.getState(),
+    undefined,
+    () => store.getState()
   );
 
-  React.useDebugValue(state);
+  // Instead of subscribing with `useSyncExternalStore`,
+  // we add custom subscription logic in an effect.
+  // This means React isn't forced to re-render immediately
+  // and state updates work with `useTransition`.
+  // The disadvantage is that it can potentially cause tearing.
+  // However, since we subscribe to the store only once,
+  // and pass this value down, it should not happen in practice.
+  React.useEffect(() => {
+    const unsubscribe = store.subscribe(() => rerender());
+
+    // We need to rerender again after the effect runs
+    // So we handle store changes after render and before the effect
+    rerender();
+
+    return unsubscribe;
+  }, [store]);
 
   const pendingUpdatesRef = React.useRef<(() => void)[]>([]);
 
@@ -95,6 +108,8 @@ export function useSyncState<T>(getInitialState: () => T) {
     }
   });
 
+  React.useEffect(flushUpdates);
+
   return {
     state,
     getState: store.getState,

package/src/utilities.tsx

@@ -0,0 +1,122 @@
+/**
+ * Flatten a type to remove all type alias names, unions etc.
+ * This will show a plain object when hovering over the type.
+ */
+export type FlatType<T> = { [K in keyof T]: T[K] } & {};
+
+/**
+ * keyof T doesn't work for union types. We can use distributive conditional types instead.
+ * https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
+ */
+export type KeysOf<T> = T extends {} ? keyof T : never;
+
+/**
+ * Extract string keys from an object type.
+ */
+export type KeyOf<T extends {}> = Extract<keyof T, string>;
+
+/**
+ * We get a union type when using keyof, but we want an intersection instead.
+ * https://stackoverflow.com/a/50375286/1665026
+ */
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never;
+
+export type UnknownToUndefined<T> = unknown extends T ? undefined : T;
+
+/**
+ * Exclude undefined from a type.
+ * Similar to NonNullable but only excludes undefined, not null.
+ */
+export type NotUndefined<T> = T extends undefined ? never : T;
+
+export type AnyToUnknown<T> = 0 extends 1 & T ? unknown : T;
+
+/**
+ * Check if a function type has arguments.
+ */
+export type HasArguments<T extends (...args: any[]) => any> =
+  Parameters<T> extends []
+    ? false
+    : Parameters<T> extends [undefined?]
+      ? false
+      : true;
+
+export type ValidPathPattern = `:${string}` | `${string}/:${string}`;
+
+/**
+ * Strip regex pattern from a path param.
+ * e.g. `userId([a-z]+)` -> `userId`
+ */
+type StripRegex<Param extends string> = Param extends `${infer Name}(${string})`
+  ? Name
+  : Param;
+
+/**
+ * Extract a single path param from a segment.
+ * e.g. `:userId` -> `{ userId: string }`, `:id?` -> `{ id?: string }`
+ */
+type ExtractSegmentParam<Segment extends string> =
+  Segment extends `:${infer Param}?`
+    ? { [K in StripRegex<Param>]?: string }
+    : Segment extends `:${infer Param}`
+      ? { [K in StripRegex<Param>]: string }
+      : {};
+
+/**
+ * Extract path params from a path string.
+ * e.g. `/foo/:userId/:postId` -> `{ userId: string; postId: string }`
+ * Supports optional params with `?` suffix.
+ * Params must start with `:` at the beginning of a segment (after `/`).
+ */
+export type ExtractParamStrings<Path extends string> =
+  Path extends `${infer Segment}/${infer Rest}`
+    ? ExtractSegmentParam<Segment> & ExtractParamStrings<Rest>
+    : ExtractSegmentParam<Path>;
+
+/**
+ * Extract the parsed params type from base params and parse functions.
+ * Applies the return type of parse functions to the corresponding params.
+ */
+export type ExtractParamsType<Params, Parse> = {
+  [K in keyof Params]: K extends keyof Parse
+    ? Parse[K] extends (value: string) => infer R
+      ? R
+      : Params[K]
+    : Params[K];
+};
+
+/**
+ * Infer the path string from a linking config.
+ */
+export type InferPath<T> = T extends { path: infer P extends string }
+  ? P
+  : never;
+
+/**
+ * Infer the parse functions from a linking config.
+ */
+export type InferParse<T> = T extends { parse: infer P } ? P : {};
+
+/**
+ * Infer the params type from a screen component or nested navigator.
+ */
+export type InferScreenParams<T> =
+  T extends React.ComponentType<{ route: { params: infer P } }>
+    ? P
+    : T extends { config: { screens: infer Screens } }
+      ? import('./types').NavigatorScreenParams<{
+          [K in keyof Screens]: Screens[K] extends React.ComponentType<{
+            route: { params: infer P };
+          }>
+            ? P
+            : Screens[K] extends { screen: infer S }
+              ? S extends React.ComponentType<{ route: { params: infer P } }>
+                ? P
+                : undefined
+              : undefined;
+        }>
+      : undefined;

package/lib/module/DeprecatedNavigationInChildContext.js

@@ -1,9 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-
-/**
- * Context which enables deprecated bubbling to child navigators.
- */
-export const DeprecatedNavigationInChildContext = /*#__PURE__*/React.createContext(false);
-//# sourceMappingURL=DeprecatedNavigationInChildContext.js.map

package/lib/module/DeprecatedNavigationInChildContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","DeprecatedNavigationInChildContext","createContext"],"sourceRoot":"../../src","sources":["DeprecatedNavigationInChildContext.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,kCAAkC,gBAAGD,KAAK,CAACE,aAAa,CAAC,KAAK,CAAC","ignoreList":[]}

package/lib/module/NavigationContext.js

@@ -1,8 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-/**
- * Context which holds the navigation prop for a screen.
- */
-export const NavigationContext = /*#__PURE__*/React.createContext(undefined);
-//# sourceMappingURL=NavigationContext.js.map

package/lib/module/NavigationContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","NavigationContext","createContext","undefined"],"sourceRoot":"../../src","sources":["NavigationContext.tsx"],"mappings":";;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,gBAAGD,KAAK,CAACE,aAAa,CAElDC,SAAS,CAAC","ignoreList":[]}

package/lib/module/NavigationRouteContext.js

@@ -1,9 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-
-/**
- * Context which holds the route prop for a screen.
- */
-export const NavigationRouteContext = /*#__PURE__*/React.createContext(undefined);
-//# sourceMappingURL=NavigationRouteContext.js.map

package/lib/module/NavigationRouteContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","NavigationRouteContext","createContext","undefined"],"sourceRoot":"../../src","sources":["NavigationRouteContext.tsx"],"mappings":";;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAa,CAEvDC,SAAS,CAAC","ignoreList":[]}

package/lib/module/useClientLayoutEffect.js

@@ -1,9 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-
-/**
- * Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
- */
-export const useClientLayoutEffect = typeof document !== 'undefined' || typeof navigator !== 'undefined' && navigator.product === 'ReactNative' ? React.useLayoutEffect : React.useEffect;
-//# sourceMappingURL=useClientLayoutEffect.js.map

package/lib/module/useClientLayoutEffect.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useClientLayoutEffect","document","navigator","product","useLayoutEffect","useEffect"],"sourceRoot":"../../src","sources":["useClientLayoutEffect.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,GAChC,OAAOC,QAAQ,KAAK,WAAW,IAC9B,OAAOC,SAAS,KAAK,WAAW,IAAIA,SAAS,CAACC,OAAO,KAAK,aAAc,GACrEJ,KAAK,CAACK,eAAe,GACrBL,KAAK,CAACM,SAAS","ignoreList":[]}

package/lib/typescript/src/DeprecatedNavigationInChildContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-/**
- * Context which enables deprecated bubbling to child navigators.
- */
-export declare const DeprecatedNavigationInChildContext: React.Context<boolean>;
-//# sourceMappingURL=DeprecatedNavigationInChildContext.d.ts.map

package/lib/typescript/src/DeprecatedNavigationInChildContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeprecatedNavigationInChildContext.d.ts","sourceRoot":"","sources":["../../../src/DeprecatedNavigationInChildContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,kCAAkC,wBAA6B,CAAC"}

package/lib/typescript/src/NavigationContext.d.ts

@@ -1,8 +0,0 @@
-import type { ParamListBase } from '@react-navigation/routers';
-import * as React from 'react';
-import type { NavigationProp } from './types';
-/**
- * Context which holds the navigation prop for a screen.
- */
-export declare const NavigationContext: React.Context<NavigationProp<ParamListBase> | undefined>;
-//# sourceMappingURL=NavigationContext.d.ts.map

package/lib/typescript/src/NavigationContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationContext.d.ts","sourceRoot":"","sources":["../../../src/NavigationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,0DAElB,CAAC"}

package/lib/typescript/src/NavigationRouteContext.d.ts

@@ -1,7 +0,0 @@
-import type { Route } from '@react-navigation/routers';
-import * as React from 'react';
-/**
- * Context which holds the route prop for a screen.
- */
-export declare const NavigationRouteContext: React.Context<Route<string> | undefined>;
-//# sourceMappingURL=NavigationRouteContext.d.ts.map

package/lib/typescript/src/NavigationRouteContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationRouteContext.d.ts","sourceRoot":"","sources":["../../../src/NavigationRouteContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,sBAAsB,0CAEvB,CAAC"}

package/lib/typescript/src/useClientLayoutEffect.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-/**
- * Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
- */
-export declare const useClientLayoutEffect: typeof React.useEffect;
-//# sourceMappingURL=useClientLayoutEffect.d.ts.map

package/lib/typescript/src/useClientLayoutEffect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClientLayoutEffect.d.ts","sourceRoot":"","sources":["../../../src/useClientLayoutEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,qBAAqB,wBAIb,CAAC"}

package/src/DeprecatedNavigationInChildContext.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-
-/**
- * Context which enables deprecated bubbling to child navigators.
- */
-export const DeprecatedNavigationInChildContext = React.createContext(false);

package/src/NavigationContext.tsx

@@ -1,11 +0,0 @@
-import type { ParamListBase } from '@react-navigation/routers';
-import * as React from 'react';
-
-import type { NavigationProp } from './types';
-
-/**
- * Context which holds the navigation prop for a screen.
- */
-export const NavigationContext = React.createContext<
-  NavigationProp<ParamListBase> | undefined
->(undefined);

package/src/NavigationRouteContext.tsx

@@ -1,9 +0,0 @@
-import type { Route } from '@react-navigation/routers';
-import * as React from 'react';
-
-/**
- * Context which holds the route prop for a screen.
- */
-export const NavigationRouteContext = React.createContext<
-  Route<string> | undefined
->(undefined);

package/src/useClientLayoutEffect.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-/**
- * Use `useEffect` during SSR and `useLayoutEffect` in the Browser & React Native to avoid warnings.
- */
-export const useClientLayoutEffect =
-  typeof document !== 'undefined' ||
-  (typeof navigator !== 'undefined' && navigator.product === 'ReactNative')
-    ? React.useLayoutEffect
-    : React.useEffect;