revert useShallow refactor in #2701 (#2703)

src/react.ts

@@ -1,8 +1,4 @@
-// import { useDebugValue, useSyncExternalStore } from 'react'
-// That doesn't work in ESM, because React libs are CJS only.
-// See: https://github.com/pmndrs/valtio/issues/452
-// The following is a workaround until ESM is supported.
-import ReactExports from 'react'
+import React from 'react'
 import { createStore } from './vanilla.ts'
 import type {
   Mutate,
@@ -11,8 +7,6 @@ import type {
   StoreMutatorIdentifier,
 } from './vanilla.ts'
 
-const { useDebugValue, useSyncExternalStore } = ReactExports
-
 type ExtractState<S> = S extends { getState: () => infer T } ? T : never
 
 type ReadonlyStoreApi<T> = Pick<
@@ -34,12 +28,12 @@ export function useStore<TState, StateSlice>(
   api: ReadonlyStoreApi<TState>,
   selector: (state: TState) => StateSlice = identity as any,
 ) {
-  const slice = useSyncExternalStore(
+  const slice = React.useSyncExternalStore(
     api.subscribe,
     () => selector(api.getState()),
     () => selector(api.getInitialState()),
   )
-  useDebugValue(slice)
+  React.useDebugValue(slice)
   return slice
 }
 

src/react/shallow.ts

@@ -1,22 +1,12 @@
-// import { useRef } from 'react'
-// That doesnt work in ESM, because React libs are CJS only.
-// The following is a workaround until ESM is supported.
-import ReactExports from 'react'
+import React from 'react'
 import { shallow } from '../vanilla/shallow.ts'
 
-const { useRef } = ReactExports
-
-const sliceCache = new WeakMap<object, unknown>()
-
 export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
-  const key = useRef({}).current
+  const prev = React.useRef<U>()
   return (state) => {
-    const prev = sliceCache.get(key) as U | undefined
     const next = selector(state)
-    if (shallow(prev, next)) {
-      return prev as U
-    }
-    sliceCache.set(key, next)
-    return next
+    return shallow(prev.current, next)
+      ? (prev.current as U)
+      : (prev.current = next)
   }
 }

src/traditional.ts

@@ -1,9 +1,4 @@
-// import { useDebugValue } from 'react'
-// import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
-// Those don't work in ESM, because React libs are CJS only.
-// See: https://github.com/pmndrs/valtio/issues/452
-// The following is a workaround until ESM is supported.
-import ReactExports from 'react'
+import React from 'react'
 // eslint-disable-next-line import/extensions
 import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
 import { createStore } from './vanilla.ts'
@@ -14,7 +9,6 @@ import type {
   StoreMutatorIdentifier,
 } from './vanilla.ts'
 
-const { useDebugValue } = ReactExports
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
 
 type ExtractState<S> = S extends { getState: () => infer T } ? T : never
@@ -48,7 +42,7 @@ export function useStoreWithEqualityFn<TState, StateSlice>(
     selector,
     equalityFn,
   )
-  useDebugValue(slice)
+  React.useDebugValue(slice)
   return slice
 }