@shopify/react-hooks - npm Package Compare versions

Comparing version 1.12.3 to 1.13.0

build/cjs/hooks/index.js

@@ -78,2 +78,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+  enumerable: true,
+  get: function get() {
+    return _isomorphicLayoutEffect.useIsomorphicLayoutEffect;
+  }
+});
 
@@ -100,2 +106,4 @@ var _debounced = require("./debounced.js");
 
-var _delayedCallback = require("./delayed-callback.js");
+var _delayedCallback = require("./delayed-callback.js");
+
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");

build/cjs/hooks/interval.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");
+
 // Adapted from https://overreacted.io/making-setinterval-declarative-with-react-hooks
@@ -17,4 +19,5 @@ // Also available at https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md
 function useInterval(callback, delay) {
-  var savedCallback = (0, _react.useRef)(callback);
-  (0, _react.useEffect)(function () {
+  var savedCallback = (0, _react.useRef)(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+
+  (0, _isomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     savedCallback.current = callback;
@@ -21,0 +24,0 @@ }, [callback]);

build/cjs/hooks/lazy-ref.js

@@ -10,12 +10,21 @@ "use strict";
 
-var UNSET = Symbol('unset');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function useLazyRef(getValue) {
-  var ref = (0, _react.useRef)(UNSET);
+  var _useState = (0, _react.useState)(getValue),
+      _useState2 = _slicedToArray(_useState, 1),
+      value = _useState2[0];
 
-  if (ref.current === UNSET) {
-    ref.current = getValue();
-  }
-
+  var ref = (0, _react.useRef)(value);
   return ref;
 }

build/cjs/hooks/timeout.js

@@ -10,5 +10,8 @@ "use strict";
 
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");
+
 function useTimeout(callback, delay) {
-  var savedCallback = (0, _react.useRef)(callback);
-  (0, _react.useEffect)(function () {
+  var savedCallback = (0, _react.useRef)(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+
+  (0, _isomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     savedCallback.current = callback;
@@ -15,0 +18,0 @@ }, [callback]);

build/node/hooks/index.js

@@ -78,2 +78,8 @@ "use strict";
 });
+Object.defineProperty(exports, "useIsomorphicLayoutEffect", {
+  enumerable: true,
+  get: function () {
+    return _isomorphicLayoutEffect.useIsomorphicLayoutEffect;
+  }
+});
 
@@ -100,2 +106,4 @@ var _debounced = require("./debounced.js");
 
-var _delayedCallback = require("./delayed-callback.js");
+var _delayedCallback = require("./delayed-callback.js");
+
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");

build/node/hooks/interval.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");
+
 // Adapted from https://overreacted.io/making-setinterval-declarative-with-react-hooks
@@ -17,4 +19,5 @@ // Also available at https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md
 function useInterval(callback, delay) {
-  const savedCallback = (0, _react.useRef)(callback);
-  (0, _react.useEffect)(() => {
+  const savedCallback = (0, _react.useRef)(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+
+  (0, _isomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     savedCallback.current = callback;
@@ -21,0 +24,0 @@ }, [callback]);

build/node/hooks/lazy-ref.js

@@ -10,12 +10,6 @@ "use strict";
 
-const UNSET = Symbol('unset');
-
 function useLazyRef(getValue) {
-  const ref = (0, _react.useRef)(UNSET);
-
-  if (ref.current === UNSET) {
-    ref.current = getValue();
-  }
-
+  const [value] = (0, _react.useState)(getValue);
+  const ref = (0, _react.useRef)(value);
   return ref;
 }

build/node/hooks/timeout.js

@@ -10,5 +10,8 @@ "use strict";
 
+var _isomorphicLayoutEffect = require("./isomorphic-layout-effect.js");
+
 function useTimeout(callback, delay) {
-  const savedCallback = (0, _react.useRef)(callback);
-  (0, _react.useEffect)(() => {
+  const savedCallback = (0, _react.useRef)(callback); // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+
+  (0, _isomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     savedCallback.current = callback;
@@ -15,0 +18,0 @@ }, [callback]);

build/ts/hooks/debounced.js

@@ -1,20 +0,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDebouncedValue = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var DEFAULT_DELAY = 500;
-function useDebouncedValue(value, _a) {
-    var timeoutMs = (_a === void 0 ? { timeoutMs: DEFAULT_DELAY } : _a).timeoutMs;
-    var _b = tslib_1.__read(react_1.useState(value), 2), state = _b[0], setState = _b[1];
-    var stateRef = react_1.useRef(state);
-    react_1.useEffect(function () {
+import { useEffect, useState, useRef } from 'react';
+const DEFAULT_DELAY = 500;
+export function useDebouncedValue(value, { timeoutMs } = { timeoutMs: DEFAULT_DELAY }) {
+    const [state, setState] = useState(value);
+    const stateRef = useRef(state);
+    useEffect(() => {
         if (stateRef.current === value) {
             return;
         }
-        var timeout = setTimeout(function () {
+        const timeout = setTimeout(() => {
             stateRef.current = value;
             setState(value);
         }, timeoutMs);
-        return function () {
+        return () => {
             clearTimeout(timeout);
@@ -25,2 +20,1 @@ };
 }
-exports.useDebouncedValue = useDebouncedValue;

build/ts/hooks/delayed-callback.js

@@ -1,9 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDelayedCallback = void 0;
-var react_1 = require("react");
-function useDelayedCallback(callback, delay) {
-    var timeoutRef = react_1.useRef();
-    react_1.useEffect(function () {
-        return function () {
+import { useEffect, useRef } from 'react';
+export function useDelayedCallback(callback, delay) {
+    const timeoutRef = useRef();
+    useEffect(() => {
+        return () => {
             if (timeoutRef.current != null) {
@@ -15,3 +12,3 @@ clearTimeout(timeoutRef.current);
     function callbackWithDelay() {
-        var timeoutId = setTimeout(function () {
+        const timeoutId = setTimeout(() => {
             callback();
@@ -24,2 +21,1 @@ timeoutRef.current = undefined;
 }
-exports.useDelayedCallback = useDelayedCallback;

build/ts/hooks/force-update.js

@@ -1,10 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useForceUpdate = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-function useForceUpdate() {
-    var _a = tslib_1.__read(react_1.useState({}), 2), setState = _a[1];
-    return react_1.useCallback(function () { return setState({}); }, []);
+import { useState, useCallback } from 'react';
+export function useForceUpdate() {
+    const [, setState] = useState({});
+    return useCallback(() => setState({}), []);
 }
-exports.useForceUpdate = useForceUpdate;

build/ts/hooks/index.d.ts

@@ -12,2 +12,3 @@ export { useDebouncedValue } from './debounced';
 export { useDelayedCallback } from './delayed-callback';
+export { useIsomorphicLayoutEffect } from './isomorphic-layout-effect';
 //# sourceMappingURL=index.d.ts.map

build/ts/hooks/index.js

@@ -1,25 +0,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var debounced_1 = require("./debounced");
-Object.defineProperty(exports, "useDebouncedValue", { enumerable: true, get: function () { return debounced_1.useDebouncedValue; } });
-var interval_1 = require("./interval");
-Object.defineProperty(exports, "useInterval", { enumerable: true, get: function () { return interval_1.useInterval; } });
-var lazy_ref_1 = require("./lazy-ref");
-Object.defineProperty(exports, "useLazyRef", { enumerable: true, get: function () { return lazy_ref_1.useLazyRef; } });
-var media_1 = require("./media");
-Object.defineProperty(exports, "useMedia", { enumerable: true, get: function () { return media_1.useMedia; } });
-Object.defineProperty(exports, "useMediaLayout", { enumerable: true, get: function () { return media_1.useMediaLayout; } });
-var mounted_ref_1 = require("./mounted-ref");
-Object.defineProperty(exports, "useMountedRef", { enumerable: true, get: function () { return mounted_ref_1.useMountedRef; } });
-var on_value_change_1 = require("./on-value-change");
-Object.defineProperty(exports, "useOnValueChange", { enumerable: true, get: function () { return on_value_change_1.useOnValueChange; } });
-var previous_1 = require("./previous");
-Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return previous_1.usePrevious; } });
-var timeout_1 = require("./timeout");
-Object.defineProperty(exports, "useTimeout", { enumerable: true, get: function () { return timeout_1.useTimeout; } });
-var toggle_1 = require("./toggle");
-Object.defineProperty(exports, "useToggle", { enumerable: true, get: function () { return toggle_1.useToggle; } });
-var force_update_1 = require("./force-update");
-Object.defineProperty(exports, "useForceUpdate", { enumerable: true, get: function () { return force_update_1.useForceUpdate; } });
-var delayed_callback_1 = require("./delayed-callback");
-Object.defineProperty(exports, "useDelayedCallback", { enumerable: true, get: function () { return delayed_callback_1.useDelayedCallback; } });
+export { useDebouncedValue } from './debounced';
+export { useInterval } from './interval';
+export { useLazyRef } from './lazy-ref';
+export { useMedia, useMediaLayout } from './media';
+export { useMountedRef } from './mounted-ref';
+export { useOnValueChange } from './on-value-change';
+export { usePrevious } from './previous';
+export { useTimeout } from './timeout';
+export { useToggle } from './toggle';
+export { useForceUpdate } from './force-update';
+export { useDelayedCallback } from './delayed-callback';
+export { useIsomorphicLayoutEffect } from './isomorphic-layout-effect';

build/ts/hooks/interval.js

@@ -1,5 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterval = void 0;
-var react_1 = require("react");
+import { useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './isomorphic-layout-effect';
 // Adapted from https://overreacted.io/making-setinterval-declarative-with-react-hooks
@@ -10,8 +8,9 @@ // Also available at https://github.com/gaearon/overreacted.io/blob/master/src/pages/making-setinterval-declarative-with-react-hooks/index.md
 //
-function useInterval(callback, delay) {
-    var savedCallback = react_1.useRef(callback);
-    react_1.useEffect(function () {
+export function useInterval(callback, delay) {
+    const savedCallback = useRef(callback);
+    // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+    useIsomorphicLayoutEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
-    react_1.useEffect(function () {
+    useEffect(() => {
         function tick() {
@@ -21,7 +20,6 @@ savedCallback.current();
         if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
         }
     }, [delay]);
 }
-exports.useInterval = useInterval;

build/ts/hooks/lazy-ref.js

@@ -1,13 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLazyRef = void 0;
-var react_1 = require("react");
-var UNSET = Symbol('unset');
-function useLazyRef(getValue) {
-    var ref = react_1.useRef(UNSET);
-    if (ref.current === UNSET) {
-        ref.current = getValue();
-    }
+import { useRef, useState } from 'react';
+export function useLazyRef(getValue) {
+    const [value] = useState(getValue);
+    const ref = useRef(value);
     return ref;
 }
-exports.useLazyRef = useLazyRef;

build/ts/hooks/media.js

@@ -1,20 +0,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaLayout = exports.useMedia = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
+import { useState, useEffect, useLayoutEffect } from 'react';
 function createUseMediaFactory(useEffectHook) {
-    return function (query) {
-        var _a = tslib_1.__read(react_1.useState(false), 2), match = _a[0], setMatch = _a[1];
-        useEffectHook(function () {
+    return (query) => {
+        const [match, setMatch] = useState(false);
+        useEffectHook(() => {
             if (!window || !window.matchMedia) {
                 return;
             }
-            var matchMedia = window.matchMedia(query);
-            var updateMatch = function (event) {
-                return setMatch(event.matches);
-            };
+            const matchMedia = window.matchMedia(query);
+            const updateMatch = (event) => setMatch(event.matches);
             setMatch(matchMedia.matches);
             matchMedia.addListener(updateMatch);
-            return function () {
+            return () => {
                 matchMedia.removeListener(updateMatch);
@@ -26,3 +20,3 @@ };
 }
-exports.useMedia = createUseMediaFactory(react_1.useEffect);
-exports.useMediaLayout = createUseMediaFactory(react_1.useLayoutEffect);
+export const useMedia = createUseMediaFactory(useEffect);
+export const useMediaLayout = createUseMediaFactory(useLayoutEffect);

build/ts/hooks/mounted-ref.js

@@ -1,9 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountedRef = void 0;
-var react_1 = require("react");
-function useMountedRef() {
-    var mounted = react_1.useRef(true);
-    react_1.useEffect(function () {
-        return function () {
+import { useRef, useEffect } from 'react';
+export function useMountedRef() {
+    const mounted = useRef(true);
+    useEffect(() => {
+        return () => {
             mounted.current = false;
@@ -14,2 +11,1 @@ };
 }
-exports.useMountedRef = useMountedRef;

build/ts/hooks/on-value-change.js

@@ -1,10 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnValueChange = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-function useOnValueChange(value, onChange) {
-    var tracked = react_1.default.useRef(value);
-    react_1.useEffect(function () {
-        var oldValue = tracked.current;
+import React, { useEffect } from 'react';
+export function useOnValueChange(value, onChange) {
+    const tracked = React.useRef(value);
+    useEffect(() => {
+        const oldValue = tracked.current;
         if (value !== tracked.current) {
@@ -16,2 +12,1 @@ tracked.current = value;
 }
-exports.useOnValueChange = useOnValueChange;

build/ts/hooks/previous.js

@@ -1,8 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = void 0;
-var react_1 = require("react");
-function usePrevious(value) {
-    var ref = react_1.useRef();
-    react_1.useEffect(function () {
+import { useRef, useEffect } from 'react';
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
         ref.current = value;
@@ -12,2 +9,1 @@ }, [value]);
 }
-exports.usePrevious = usePrevious;

build/ts/hooks/timeout.js

@@ -1,11 +0,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimeout = void 0;
-var react_1 = require("react");
-function useTimeout(callback, delay) {
-    var savedCallback = react_1.useRef(callback);
-    react_1.useEffect(function () {
+import { useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './isomorphic-layout-effect';
+export function useTimeout(callback, delay) {
+    const savedCallback = useRef(callback);
+    // Need to use a layout effect to force the saved callback to be synchronously updated during a commit
+    useIsomorphicLayoutEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
-    react_1.useEffect(function () {
+    useEffect(() => {
         function tick() {
@@ -15,7 +14,6 @@ savedCallback.current();
         if (delay !== null) {
-            var id_1 = setTimeout(tick, delay);
-            return function () { return clearTimeout(id_1); };
+            const id = setTimeout(tick, delay);
+            return () => clearTimeout(id);
         }
     }, [delay]);
 }
-exports.useTimeout = useTimeout;

build/ts/hooks/toggle.js

@@ -1,6 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggle = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
+import { useState, useCallback } from 'react';
 /**
@@ -10,11 +6,10 @@ * Returns a stateful value, and a set of memoized functions to toggle it,
  */
-function useToggle(initialState) {
-    var _a = tslib_1.__read(react_1.useState(initialState), 2), value = _a[0], setState = _a[1];
+export function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
     return {
-        value: value,
-        toggle: react_1.useCallback(function () { return setState(function (state) { return !state; }); }, []),
-        setTrue: react_1.useCallback(function () { return setState(true); }, []),
-        setFalse: react_1.useCallback(function () { return setState(false); }, []),
+        value,
+        toggle: useCallback(() => setState(state => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
     };
 }
-exports.useToggle = useToggle;

build/ts/index.js

@@ -1,4 +0,1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./hooks"), exports);
+export * from './hooks';

CHANGELOG.md

@@ -8,2 +8,10 @@ # Changelog
 
+<!-- ## [Unreleased] -->
+
+## [1.13.0] - 2021-04-07
+
+- Added `useIsomorphicLayoutEffect` hook [#1813](https://github.com/Shopify/quilt/pull/1813).
+- Updated `useLazyRef` hook implementation to avoid mutating refs directly during the render phase, which is unsafe [#1813](https://github.com/Shopify/quilt/pull/1813).
+- Updated `useTimeout` and `useInterval` hooks. Both of these hooks use mutable ref to hold on to the latest callback function. Now updating this ref synchronously to avoid stale callbacks being invoked [#1813](https://github.com/Shopify/quilt/pull/1813).
+
 ## [1.12.2] - 2021-03-03
@@ -10,0 +18,0 @@

package.json

 {
   "name": "@shopify/react-hooks",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "A collection of primitive React hooks",

README.md

@@ -21,2 +21,3 @@ # `@shopify/react-hooks`
 - [useInterval()](#useinterval)
+- [useIsomorphicLayoutEffect()](#useisomorphiclayouteffect)
 - [useLazyRef()](#uselazyref)
@@ -158,2 +159,8 @@ - [useMedia() & useMediaLayout()](#usemedia--usemedialayout)
 
+### `useIsomorphicLayoutEffect()`
+
+This hook is a drop-in replacement for `useLayoutEffect` that can be used safely in a server-side rendered app. It resolves to `useEffect` on the server and `useLayoutEffect` on the client (since `useLayoutEffect` cannot be used in a server-side environment).
+
+Refer to the [`useLayoutEffect` documentation to learn more](https://reactjs.org/docs/hooks-reference.html#uselayouteffect).
+
 ### `useLazyRef()`
@@ -160,0 +167,0 @@

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

76728

increased by8.68%

Number of package files

105

increased by7.14%

Lines of code

1178

increased by1.03%

Number of lines in readme file

267

increased by2.69%

No dependency changes