@shopify/react-async - npm Package Compare versions

Comparing version 0.0.0-snapshot-20230203161211 to 0.0.0-snapshot-20230206191454

build/cjs/hooks.js

@@ -7,2 +7,3 @@ 'use strict';
 var reactEffect = require('@shopify/react-effect');
+var reactHooks = require('@shopify/react-hooks');
 var assets = require('./context/assets.js');
@@ -29,2 +30,3 @@
   const [value, setValue] = React.useState(() => immediate || typeof window !== 'undefined' ? resolver.resolved : null);
+  const mounted = reactHooks.useMountedRef();
   const load = React.useCallback(async () => {
@@ -36,16 +38,23 @@ if (value != null) {
     try {
-      const resolved = await resolver.resolve(); // It's important to use the function form of setValue here.
-      // Resolved is going to be a function in most cases, since it's
-      // a React component. If you do not set it using the function form,
-      // React treats the component as the function that returns state,
-      // so it sets state with the result of manually calling the component
-      // (so, usually JSX).
+      const resolved = await resolver.resolve();
 
-      setValue(() => resolved);
+      if (mounted.current) {
+        // It's important to use the function form of setValue here.
+        // Resolved is going to be a function in most cases, since it's
+        // a React component. If you do not set it using the function form,
+        // React treats the component as the function that returns state,
+        // so it sets state with the result of manually calling the component
+        // (so, usually JSX).
+        setValue(() => resolved);
+      }
+
       return resolved;
     } catch (error) {
-      setValue(error);
+      if (mounted.current) {
+        setValue(error);
+      }
+
       return error;
     }
-  }, [resolver, value]);
+  }, [mounted, resolver, value]);
   const {
@@ -52,0 +61,0 @@ id

build/ts/hooks.d.ts

 import { Resolver } from '@shopify/async';
 import { IfAllOptionalKeys, NoInfer } from '@shopify/useful-types';
 import { AssetTiming, AsyncComponentType } from './types';
-export declare type Preloadable<PreloadOptions extends object> = Pick<AsyncComponentType<any, any, PreloadOptions, any, any>, 'usePreload'>;
-export declare type Prefetchable<PrefetchOptions extends object> = Pick<AsyncComponentType<any, any, any, PrefetchOptions, any>, 'usePrefetch'>;
-export declare type KeepFreshable<KeepFreshOptions extends object> = Pick<AsyncComponentType<any, any, any, any, KeepFreshOptions>, 'useKeepFresh'>;
+export type Preloadable<PreloadOptions extends object> = Pick<AsyncComponentType<any, any, PreloadOptions, any, any>, 'usePreload'>;
+export type Prefetchable<PrefetchOptions extends object> = Pick<AsyncComponentType<any, any, any, PrefetchOptions, any>, 'usePrefetch'>;
+export type KeepFreshable<KeepFreshOptions extends object> = Pick<AsyncComponentType<any, any, any, any, KeepFreshOptions>, 'useKeepFresh'>;
 export declare function usePreload<PreloadOptions extends object>(...args: IfAllOptionalKeys<PreloadOptions, [
@@ -8,0 +8,0 @@ Preloadable<PreloadOptions>,

build/ts/types.d.ts

@@ -34,5 +34,5 @@ import { ReactElement } from 'react';
 }
-export declare type PreloadOptions<T> = T extends AsyncHookTarget<any, infer U, any, any> ? U : never;
-export declare type PrefetchOptions<T> = T extends AsyncHookTarget<any, any, infer U, any> ? U : never;
-export declare type KeepFreshOptions<T> = T extends AsyncHookTarget<any, any, any, infer U> ? U : never;
+export type PreloadOptions<T> = T extends AsyncHookTarget<any, infer U, any, any> ? U : never;
+export type PrefetchOptions<T> = T extends AsyncHookTarget<any, any, infer U, any> ? U : never;
+export type KeepFreshOptions<T> = T extends AsyncHookTarget<any, any, any, infer U> ? U : never;
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@shopify/react-async",
-  "version": "0.0.0-snapshot-20230203161211",
+  "version": "0.0.0-snapshot-20230206191454",
   "license": "MIT",
@@ -36,4 +36,5 @@ "description": "Tools for creating powerful, asynchronously-loaded React components",
     "@shopify/react-effect": "^5.0.2",
+    "@shopify/react-hooks": "^3.0.2",
     "@shopify/react-hydrate": "^3.0.6",
-    "@shopify/react-idle": "^3.0.3",
+    "@shopify/react-idle": "0.0.0-snapshot-20230206191454",
     "@shopify/react-intersection-observer": "^4.0.2",
@@ -40,0 +41,0 @@ "@shopify/useful-types": "^5.1.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109894

increased by0.58%

Lines of code

1788

increased by0.79%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@shopify/react-hooks@^3.0.2

• + Added@shopify/react-hooks@3.2.0(transitive)

• + Added@shopify/react-idle@0.0.0-snapshot-20230206191454(transitive)

• - Removed@shopify/react-idle@3.2.0(transitive)

• Updated@shopify/react-idle@0.0.0-snapshot-20230206191454