@fluentui/react-context-selector - npm Package Compare versions

Comparing version 9.1.61 to 9.1.62

CHANGELOG.md

 # Change Log - @fluentui/react-context-selector
 
-This log was last generated on Thu, 06 Jun 2024 15:22:14 GMT and should not be manually modified.
+This log was last generated on Mon, 17 Jun 2024 07:31:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.62](https://github.com/microsoft/fluentui/tree/@fluentui/react-context-selector_v9.1.62)
+
+Mon, 17 Jun 2024 07:31:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-context-selector_v9.1.61..@fluentui/react-context-selector_v9.1.62)
+
+### Patches
+
+- fix: useContextSelector with React 18 ([PR #30951](https://github.com/microsoft/fluentui/pull/30951) by [e-mail])
+
 ## [9.1.61](https://github.com/microsoft/fluentui/tree/@fluentui/react-context-selector_v9.1.61)
 
-Thu, 06 Jun 2024 15:22:14 GMT 
+Thu, 06 Jun 2024 15:26:32 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-context-selector_v9.1.60..@fluentui/react-context-selector_v9.1.61)
@@ -11,0 +20,0 @@

lib-commonjs/useContextSelector.js

@@ -18,44 +18,47 @@ "use strict";
     const selected = selector(value);
-    const [state, dispatch] = _react.useReducer((prevState, payload)=>{
-        if (!payload) {
-            // early bail out when is dispatched during render
-            return [
-                value,
-                selected
-            ];
-        }
-        if (payload[0] <= version) {
-            if (objectIs(prevState[1], selected)) {
-                return prevState; // bail out
+    const [state, setState] = _react.useState([
+        value,
+        selected
+    ]);
+    const dispatch = (payload)=>{
+        setState((prevState)=>{
+            if (!payload) {
+                // early bail out when is dispatched during render
+                return [
+                    value,
+                    selected
+                ];
             }
-            return [
-                value,
-                selected
-            ];
-        }
-        try {
-            if (objectIs(prevState[0], payload[1])) {
-                return prevState; // do not update
+            if (payload[0] <= version) {
+                if (Object.is(prevState[1], selected)) {
+                    return prevState; // bail out
+                }
+                return [
+                    value,
+                    selected
+                ];
             }
-            const nextSelected = selector(payload[1]);
-            if (objectIs(prevState[1], nextSelected)) {
-                return prevState; // do not update
+            try {
+                if (Object.is(prevState[0], payload[1])) {
+                    return prevState; // do not update
+                }
+                const nextSelected = selector(payload[1]);
+                if (Object.is(prevState[1], nextSelected)) {
+                    return prevState; // do not update
+                }
+                return [
+                    payload[1],
+                    nextSelected
+                ];
+            } catch (e) {
+            // ignored (stale props or some other reason)
             }
+            // explicitly spread to enforce typing
             return [
-                payload[1],
-                nextSelected
-            ];
-        } catch (e) {
-        // ignored (stale props or some other reason)
-        }
-        // explicitly spread to enforce typing
-        return [
-            prevState[0],
-            prevState[1]
-        ]; // schedule update
-    }, [
-        value,
-        selected
-    ]);
-    if (!objectIs(state[1], selected)) {
+                prevState[0],
+                prevState[1]
+            ]; // schedule update
+        });
+    };
+    if (!Object.is(state[1], selected)) {
         // schedule re-render
@@ -65,9 +68,11 @@ // this is safe because it's self contained
     }
+    const stableDispatch = (0, _reactutilities.useEventCallback)(dispatch);
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        listeners.push(dispatch);
+        listeners.push(stableDispatch);
         return ()=>{
-            const index = listeners.indexOf(dispatch);
+            const index = listeners.indexOf(stableDispatch);
             listeners.splice(index, 1);
         };
     }, [
+        stableDispatch,
         listeners
@@ -77,12 +82,1 @@ ]);
 };
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function is(x, y) {
-    return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-    ;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const objectIs = // @ts-ignore fallback to native if it exists (not in IE11)
-typeof Object.is === 'function' ? Object.is : is;

lib/useContextSelector.js

@@ -1,2 +0,2 @@
-import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
@@ -12,44 +12,47 @@ /**
     const selected = selector(value);
-    const [state, dispatch] = React.useReducer((prevState, payload)=>{
-        if (!payload) {
-            // early bail out when is dispatched during render
-            return [
-                value,
-                selected
-            ];
-        }
-        if (payload[0] <= version) {
-            if (objectIs(prevState[1], selected)) {
-                return prevState; // bail out
+    const [state, setState] = React.useState([
+        value,
+        selected
+    ]);
+    const dispatch = (payload)=>{
+        setState((prevState)=>{
+            if (!payload) {
+                // early bail out when is dispatched during render
+                return [
+                    value,
+                    selected
+                ];
             }
-            return [
-                value,
-                selected
-            ];
-        }
-        try {
-            if (objectIs(prevState[0], payload[1])) {
-                return prevState; // do not update
+            if (payload[0] <= version) {
+                if (Object.is(prevState[1], selected)) {
+                    return prevState; // bail out
+                }
+                return [
+                    value,
+                    selected
+                ];
             }
-            const nextSelected = selector(payload[1]);
-            if (objectIs(prevState[1], nextSelected)) {
-                return prevState; // do not update
+            try {
+                if (Object.is(prevState[0], payload[1])) {
+                    return prevState; // do not update
+                }
+                const nextSelected = selector(payload[1]);
+                if (Object.is(prevState[1], nextSelected)) {
+                    return prevState; // do not update
+                }
+                return [
+                    payload[1],
+                    nextSelected
+                ];
+            } catch (e) {
+            // ignored (stale props or some other reason)
             }
+            // explicitly spread to enforce typing
             return [
-                payload[1],
-                nextSelected
-            ];
-        } catch (e) {
-        // ignored (stale props or some other reason)
-        }
-        // explicitly spread to enforce typing
-        return [
-            prevState[0],
-            prevState[1]
-        ]; // schedule update
-    }, [
-        value,
-        selected
-    ]);
-    if (!objectIs(state[1], selected)) {
+                prevState[0],
+                prevState[1]
+            ]; // schedule update
+        });
+    };
+    if (!Object.is(state[1], selected)) {
         // schedule re-render
@@ -59,9 +62,11 @@ // this is safe because it's self contained
     }
+    const stableDispatch = useEventCallback(dispatch);
     useIsomorphicLayoutEffect(()=>{
-        listeners.push(dispatch);
+        listeners.push(stableDispatch);
         return ()=>{
-            const index = listeners.indexOf(dispatch);
+            const index = listeners.indexOf(stableDispatch);
             listeners.splice(index, 1);
         };
     }, [
+        stableDispatch,
         listeners
@@ -71,13 +76,1 @@ ]);
 };
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function is(x, y) {
-    return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-    ;
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const objectIs = // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore fallback to native if it exists (not in IE11)
-typeof Object.is === 'function' ? Object.is : is;

package.json

 {
   "name": "@fluentui/react-context-selector",
-  "version": "9.1.61",
+  "version": "9.1.62",
   "description": "React useContextSelector hook in userland",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.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

Worsened metrics

Total package byte prevSize

100767

decreased by-1.63%

Lines of code

399

decreased by-3.16%

No dependency changes