feat: support concurrent safe (#118)

* feat: support concurrent safe

* style: remove console

packages/core/src/useActiveElement/index.ts

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 import { useEventListener } from '../useEventListener'
 import { useMount } from '../useMount'
+import { defaultWindow } from '../utils/browser'
 import type { UseActiveElement } from './interface'
 
 export const useActiveElement: UseActiveElement = <T extends Element>(): T | null => {
@@ -9,8 +10,8 @@ export const useActiveElement: UseActiveElement = <T extends Element>(): T | nul
   const listener = useCallback(() => {
     setActive(window?.document.activeElement as T)
   }, [])
-  useEventListener('blur', listener, () => window, true)
-  useEventListener('focus', listener, () => window, true)
+  useEventListener('blur', listener, defaultWindow, true)
+  useEventListener('focus', listener, defaultWindow, true)
 
   useMount(() => {
     setActive(window?.document.activeElement as T)

packages/core/src/useCustomCompareEffect/index.ts

@@ -1,5 +1,7 @@
 import type { DependencyList, EffectCallback } from 'react'
 import { useEffect, useRef } from 'react'
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
+import { useUpdate } from '../useUpdate'
 import type { DepsEqualFnType, UseCustomCompareEffect } from './interface'
 
 export const useCustomCompareEffect: UseCustomCompareEffect = <TDeps extends DependencyList>(
@@ -22,11 +24,19 @@ export const useCustomCompareEffect: UseCustomCompareEffect = <TDeps extends Dep
   }
 
   const ref = useRef<TDeps | undefined>(undefined)
+  const forceUpdate = useUpdate()
 
-  if (!ref.current || !depsEqual(deps, ref.current)) {
+  if (!ref.current) {
     ref.current = deps
   }
 
+  useIsomorphicLayoutEffect(() => {
+    if (!depsEqual(deps, ref.current as TDeps)) {
+      ref.current = deps
+      forceUpdate()
+    }
+  })
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, ref.current)
 }

packages/core/src/useDarkMode/index.ts

@@ -3,6 +3,10 @@ import { isBrowser } from '../utils/is'
 import useStorage from '../createStorage'
 import type { UseDarkMode, UseDarkOptions } from './interface'
 
+function value() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
 export const useDarkMode: UseDarkMode = (options: UseDarkOptions) => {
   const {
     selector = 'html',
@@ -14,10 +18,6 @@ export const useDarkMode: UseDarkMode = (options: UseDarkOptions) => {
     defaultValue = false,
   } = options
 
-  const value = (): boolean => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-  }
-
   const [dark, setDark] = useStorage<boolean>(
     storageKey,
     defaultValue,

packages/core/src/useLatest/index.ts

@@ -1,9 +1,12 @@
 import type { MutableRefObject } from 'react'
 import { useRef } from 'react'
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
 import type { UseLatest } from './interface'
 
 export const useLatest: UseLatest = <T>(value: T): MutableRefObject<T> => {
   const ref = useRef(value)
-  ref.current = value
+  useIsomorphicLayoutEffect(() => {
+    ref.current = value
+  }, [value])
   return ref
 }

packages/core/src/useMouse/index.ts

@@ -2,6 +2,7 @@ import type { BasicTarget } from '../utils/domTarget'
 import { getTargetElement } from '../utils/domTarget'
 import { useEventListener } from '../useEventListener'
 import { useRafState } from '../useRafState'
+import { defaultDocument } from '../utils/browser'
 import type { UseMouse, UseMouseCursorState } from './interface'
 
 const initState: UseMouseCursorState = {
@@ -53,7 +54,7 @@ export const useMouse: UseMouse = (target?: BasicTarget): UseMouseCursorState =>
       }
       setState(newState)
     },
-    () => document,
+    defaultDocument,
   )
 
   return state

packages/core/src/utils/browser.ts

@@ -24,3 +24,4 @@ export function off<T extends Window | Document | HTMLElement | EventTarget>(
 }
 
 export const defaultWindow = /* #__PURE__ */ isBrowser ? window : undefined
+export const defaultDocument = /* #__PURE__ */ isBrowser ? document : undefined