Custom React Hooks

useDeepCompareCallback
¶

Deep compare version of React.useCallback

useDeepCompareCallback.ts | 24 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { isEqual } from '@guanghechen/equal'
import type React from 'react'
import { useCallback, useRef } from 'react'

/**
 * Deep compare version of React.useCallback
 * @param fn
 * @param deps
 */
export function useDeepCompareCallback<T extends (...args: any[]) => any>(
  fn: T,
  deps: React.DependencyList,
): T {
  const signal = useRef<number>(0)
  const prevDeps = useRef<React.DependencyList>(deps)

  if (!isEqual(prevDeps.current, deps)) {
    signal.current += 1
  }
  prevDeps.current = deps

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useCallback(fn, [signal.current])
}

useDeepCompareEffect
¶

Deep compare version of React.useEffect

useDeepCompareEffect.ts | 21 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { isEqual } from '@guanghechen/equal'
import type React from 'react'
import { useEffect, useRef } from 'react'

/**
 * Deep compare version of React.useEffect
 * @param fn
 * @param deps
 */
export function useDeepCompareEffect(fn: React.EffectCallback, deps: React.DependencyList): void {
  const signal = useRef<number>(0)
  const prevDeps = useRef<React.DependencyList>(deps)

  if (!isEqual(prevDeps.current, deps)) {
    signal.current += 1
  }
  prevDeps.current = deps

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(fn, [signal.current])
}

useDeepCompareMemo
¶

Deep compare version of React.useMemo

useDeepCompareMemo.ts | 21 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { isEqual } from '@guanghechen/equal'
import type React from 'react'
import { useMemo, useRef } from 'react'

/**
 * Deep compare version of React.useMemo
 * @param fn
 * @param deps
 */
export function useDeepCompareMemo<T>(fn: () => T, deps: React.DependencyList): T {
  const signal = useRef<number>(0)
  const prevDeps = useRef<React.DependencyList>(deps)

  if (!isEqual(prevDeps.current, deps)) {
    signal.current += 1
  }
  prevDeps.current = deps

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useMemo(fn, [signal.current])
}

useInterval
¶

Execute callback interval in react function components.

userInterval.ts | 25 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { useEffect, useRef } from 'react'

type Callback = () => void

/**
 * Execute callback interval in react function components.
 * @param callback
 * @param delay
 */
export function useInterval(callback: Callback, delay: number): void {
  const callbackRef = useRef<Callback>(callback)

  useEffect(() => {
    callbackRef.current = callback
  }, [callback])

  useEffect(() => {
    const tick: Callback = () => {
      if (callbackRef.current === undefined) return
      callbackRef.current()
    }
    const id = setInterval(tick, delay)
    return () => clearInterval(id)
  }, [delay])
}

usePreviousState
¶

记录上一个状态。

利用更新 ref.current 的值不会触发组件更新的特性，在 usePreviousState 中总是返回旧的值，尽管在 userPreviousState 的 useEffect 中更新了新值，但并不触发更新。

usePreviousState.ts | 14 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useEffect, useRef } from 'react'

/**
 * Use previous state.
 * @param value
 * @returns
 */
export function usePreviousState<T = unknown>(value: T): T {
  const ref = useRef<T>(value)
  useEffect(() => {
    ref.current = value
  }, [value])
  return ref.current
}

useReactiveRef
¶

useReactiveRef.ts | 15 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import type React from 'react'
import { useEffect, useRef } from 'react'

/**
 * Create a reactive ref which will follow the changes of the given data.
 * @param data
 * @returns
 */
export function useReactiveRef<T>(data: T): React.MutableRefObject<T> {
  const ref = useRef(data)
  useEffect(() => {
    ref.current = data
  }, [data])
  return ref
}

Example
¶

demo/usePreviousState.jsx

const Container = styled.div`
  padding: 1rem;

div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    min-width: 8rem;

button {
      flex: 0 0 auto;
      user-select: none;
    }

span {
      flex: 1 1 3rem;
      color: #e37878;
    }
  }

h2 {
    padding-top: 1rem;
    border-top: 1px solid #ccc;
    margin: 1rem auto 0;
    text-align: center;
  }
`

function usePreviousState(value, defaultValue) {
  const ref = React.useRef(defaultValue)

React.useEffect(() => {
    ref.current = value
  }, [value])

console.log('[usePreviousState] value: ', value, 'current:', ref.current)
  return ref.current
}

function Component() {
  const [count, setCount] = React.useState(0)
  const prevCount = usePreviousState(count, -1)

return (
    <Container>
      <div>
        <button onClick={ () => setCount(c => c - 1) }>-</button>
        <span>{ count }</span>
        <button onClick={ () => setCount(c => c + 1) }>+</button>
      </div>
      <h2>before: {prevCount} </h2>
    </Container>
  )
}

render(<Component />)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
const Container = styled.div`
  padding: 1rem;

  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    min-width: 8rem;

    button {
      flex: 0 0 auto;
      user-select: none;
    }

    span {
      flex: 1 1 3rem;
      color: #e37878;
    }
  }

  h2 {
    padding-top: 1rem;
    border-top: 1px solid #ccc;
    margin: 1rem auto 0;
    text-align: center;
  }
`

function usePreviousState(value, defaultValue) {
  const ref = React.useRef(defaultValue)

  React.useEffect(() => {
    ref.current = value
  }, [value])

  console.log('[usePreviousState] value: ', value, 'current:', ref.current)
  return ref.current
}

function Component() {
  const [count, setCount] = React.useState(0)
  const prevCount = usePreviousState(count, -1)

  return (
    <Container>
      <div>
        <button onClick={ () => setCount(c => c - 1) }>-</button>
        <span>{ count }</span>
        <button onClick={ () => setCount(c => c + 1) }>+</button>
      </div>
      <h2>before: {prevCount} </h2>
    </Container>
  )
}

render(<Component />)

useDeepCompareCallback
¶

useDeepCompareEffect
¶

useDeepCompareMemo
¶

useInterval
¶

usePreviousState
¶

useReactiveRef
¶

Example
¶

before: -1

Comments

useDeepCompareCallback¶

useDeepCompareEffect¶

useDeepCompareMemo¶

useInterval¶

usePreviousState¶

useReactiveRef¶

Example¶

before: -1

Related¶

useDeepCompareCallback
¶

useDeepCompareEffect
¶

useDeepCompareMemo
¶

useInterval
¶

usePreviousState
¶

useReactiveRef
¶

Example
¶

Related
¶