fix: useContextSelector with React 18

Author: layershifter

packages/react-components/react-context-selector/src/useContextSelector.ts

@@ -3,15 +3,6 @@ import * as React from 'react';
 
 import { Context, ContextSelector, ContextValue, ContextVersion } from './types';
 
-/**
- * Narrowing React.Reducer type to be more easily usable below.
- * No need to export this as it's for internal reducer usage.
- */
-type ContextReducer<Value, SelectedValue> = React.Reducer<
-  readonly [Value, SelectedValue],
-  undefined | readonly [ContextVersion, Value]
->;
-
 /**
  * @internal
  * This hook returns context selected value by selector.
@@ -31,49 +22,51 @@ export const useContextSelector = <Value, SelectedValue>(
   } = contextValue;
   const selected = selector(value);
 
-  const [state, dispatch] = React.useReducer<ContextReducer<Value, SelectedValue>>(
+  const [state, setState] = React.useState<readonly [Value, SelectedValue]>([value, selected]);
+  const dispatch = React.useCallback(
     (
-      prevState: readonly [Value /* contextValue */, SelectedValue /* selector(value) */],
       payload:
         | undefined // undefined from render below
         | readonly [ContextVersion, Value], // from provider effect
-    ): readonly [Value, SelectedValue] => {
-      if (!payload) {
-        // early bail out when is dispatched during render
-        return [value, selected] as const;
-      }
-
-      if (payload[0] <= version) {
-        if (objectIs(prevState[1], selected)) {
-          return prevState; // bail out
+    ) => {
+      setState(prevState => {
+        if (!payload) {
+          // early bail out when is dispatched during render
+          return [value, selected] as const;
         }
 
-        return [value, selected] as const;
-      }
+        if (payload[0] <= version) {
+          if (Object.is(prevState[1], selected)) {
+            return prevState; // bail out
+          }
 
-      try {
-        if (objectIs(prevState[0], payload[1])) {
-          return prevState; // do not update
+          return [value, selected] as const;
         }
 
-        const nextSelected = selector(payload[1]);
+        try {
+          if (Object.is(prevState[0], payload[1])) {
+            return prevState; // do not update
+          }
 
-        if (objectIs(prevState[1], nextSelected)) {
-          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] as const;
-      } catch (e) {
-        // ignored (stale props or some other reason)
-      }
+          return [payload[1], nextSelected] as const;
+        } catch (e) {
+          // ignored (stale props or some other reason)
+        }
 
-      // explicitly spread to enforce typing
-      return [prevState[0], prevState[1]] as const; // schedule update
+        // explicitly spread to enforce typing
+        return [prevState[0], prevState[1]] as const; // schedule update
+      });
     },
-    [value, selected] as const,
+    [],
   );
 
-  if (!objectIs(state[1], selected)) {
+  if (!Object.is(state[1], selected)) {
     // schedule re-render
     // this is safe because it's self contained
     dispatch(undefined);
@@ -90,20 +83,3 @@ export const useContextSelector = <Value, SelectedValue>(
 
   return state[1] as SelectedValue;
 };
-
-/**
- * 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: any, y: any) {
-  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: (x: any, y: any) => boolean =
-  // 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;