valtio - npm Package Compare versions

Comparing version 0.4.9 to 0.4.10

index.cjs.js

@@ -251,2 +251,4 @@ 'use strict';
 
+var isSSR = typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+var useIsomorphicLayoutEffect = isSSR ? react.useEffect : react.useLayoutEffect;
 var mutableSourceCache = new WeakMap();
@@ -263,22 +265,34 @@
 var useProxy = function useProxy(p, options) {
+  var _useReducer = react.useReducer(function (c) {
+    return c + 1;
+  }, 0),
+      forceUpdate = _useReducer[1];
+
   var affected = new WeakMap();
   var lastAffected = react.useRef();
-  react.useEffect(function () {
+  var prevSnapshot = react.useRef();
+  var lastSnapshot = react.useRef();
+  useIsomorphicLayoutEffect(function () {
     lastAffected.current = affected;
+
+    if (prevSnapshot.current !== lastSnapshot.current && proxyCompare.isDeepChanged(prevSnapshot.current, lastSnapshot.current, affected, new WeakMap())) {
+      prevSnapshot.current = lastSnapshot.current;
+      forceUpdate();
+    }
   });
   var getSnapshot = react.useMemo(function () {
-    var prevSnapshot = null;
     var deepChangedCache = new WeakMap();
     return function (p) {
       var nextSnapshot = snapshot(p);
+      lastSnapshot.current = nextSnapshot;
 
       try {
-        if (prevSnapshot !== null && lastAffected.current && !proxyCompare.isDeepChanged(prevSnapshot, nextSnapshot, lastAffected.current, deepChangedCache)) {
+        if (prevSnapshot && lastAffected.current && !proxyCompare.isDeepChanged(prevSnapshot.current, nextSnapshot, lastAffected.current, deepChangedCache)) {
           // not changed
-          return prevSnapshot;
+          return prevSnapshot.current;
         }
-      } catch (e) {// ignore and return new nextSnapshot
+      } catch (e) {// ignore and return nextSnapshot
       }
 
-      return prevSnapshot = nextSnapshot;
+      return prevSnapshot.current = nextSnapshot;
     };
@@ -285,0 +299,0 @@ }, []);

index.iife.js

@@ -246,2 +246,4 @@ var valtio = (function (exports, react, proxyCompare, useSubscription) {
 
+  var isSSR = typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+  var useIsomorphicLayoutEffect = isSSR ? react.useEffect : react.useLayoutEffect;
   var mutableSourceCache = new WeakMap();
@@ -258,22 +260,34 @@
   var useProxy = function useProxy(p, options) {
+    var _useReducer = react.useReducer(function (c) {
+      return c + 1;
+    }, 0),
+        forceUpdate = _useReducer[1];
+
     var affected = new WeakMap();
     var lastAffected = react.useRef();
-    react.useEffect(function () {
+    var prevSnapshot = react.useRef();
+    var lastSnapshot = react.useRef();
+    useIsomorphicLayoutEffect(function () {
       lastAffected.current = affected;
+
+      if (prevSnapshot.current !== lastSnapshot.current && proxyCompare.isDeepChanged(prevSnapshot.current, lastSnapshot.current, affected, new WeakMap())) {
+        prevSnapshot.current = lastSnapshot.current;
+        forceUpdate();
+      }
     });
     var getSnapshot = react.useMemo(function () {
-      var prevSnapshot = null;
       var deepChangedCache = new WeakMap();
       return function (p) {
         var nextSnapshot = snapshot(p);
+        lastSnapshot.current = nextSnapshot;
 
         try {
-          if (prevSnapshot !== null && lastAffected.current && !proxyCompare.isDeepChanged(prevSnapshot, nextSnapshot, lastAffected.current, deepChangedCache)) {
+          if (prevSnapshot && lastAffected.current && !proxyCompare.isDeepChanged(prevSnapshot.current, nextSnapshot, lastAffected.current, deepChangedCache)) {
             // not changed
-            return prevSnapshot;
+            return prevSnapshot.current;
           }
-        } catch (e) {// ignore and return new nextSnapshot
+        } catch (e) {// ignore and return nextSnapshot
         }
 
-        return prevSnapshot = nextSnapshot;
+        return prevSnapshot.current = nextSnapshot;
       };
@@ -280,0 +294,0 @@ }, []);

index.js

@@ -1,2 +0,2 @@
-import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { useRef, useCallback, useEffect, useReducer, useMemo, useLayoutEffect } from 'react';
 import { markToTrack, getUntrackedObject, isDeepChanged, createDeepProxy } from 'proxy-compare';
@@ -237,2 +237,4 @@ import { useSubscription } from 'use-subscription';
 
+const isSSR = typeof window === 'undefined' || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 const mutableSourceCache = new WeakMap();
@@ -249,22 +251,30 @@
 const useProxy = (p, options) => {
+  const [, forceUpdate] = useReducer(c => c + 1, 0);
   const affected = new WeakMap();
   const lastAffected = useRef();
-  useEffect(() => {
+  const prevSnapshot = useRef();
+  const lastSnapshot = useRef();
+  useIsomorphicLayoutEffect(() => {
     lastAffected.current = affected;
+
+    if (prevSnapshot.current !== lastSnapshot.current && isDeepChanged(prevSnapshot.current, lastSnapshot.current, affected, new WeakMap())) {
+      prevSnapshot.current = lastSnapshot.current;
+      forceUpdate();
+    }
   });
   const getSnapshot = useMemo(() => {
-    let prevSnapshot = null;
     const deepChangedCache = new WeakMap();
     return p => {
       const nextSnapshot = snapshot(p);
+      lastSnapshot.current = nextSnapshot;
 
       try {
-        if (prevSnapshot !== null && lastAffected.current && !isDeepChanged(prevSnapshot, nextSnapshot, lastAffected.current, deepChangedCache)) {
+        if (prevSnapshot && lastAffected.current && !isDeepChanged(prevSnapshot.current, nextSnapshot, lastAffected.current, deepChangedCache)) {
           // not changed
-          return prevSnapshot;
+          return prevSnapshot.current;
         }
-      } catch (e) {// ignore and return new nextSnapshot
+      } catch (e) {// ignore and return nextSnapshot
       }
 
-      return prevSnapshot = nextSnapshot;
+      return prevSnapshot.current = nextSnapshot;
     };
@@ -271,0 +281,0 @@ }, []);

package.json

 {
   "name": "valtio",
   "private": false,
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
@@ -6,0 +6,0 @@ "main": "index.cjs.js",

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

54128

increased by3.75%

Lines of code

1365

increased by2.48%

No dependency changes