forked from vercel/swr
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstate.ts
More file actions
87 lines (75 loc) · 2.36 KB
/
state.ts
File metadata and controls
87 lines (75 loc) · 2.36 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { useRef, useCallback, useState, MutableRefObject } from 'react'
import { useIsomorphicLayoutEffect } from './env'
import { State } from './types'
type StateKeys = keyof State<any, any>
type StateDeps = Record<StateKeys, boolean>
/**
* An implementation of state with dependency-tracking.
*/
export default function useStateWithDeps<Data, Error, S = State<Data, Error>>(
state: S,
unmountedRef: MutableRefObject<boolean>
): [
MutableRefObject<S>,
MutableRefObject<Record<StateKeys, boolean>>,
(payload: S) => void
] {
const rerender = useState<object>({})[1]
const stateRef = useRef(state)
useIsomorphicLayoutEffect(() => {
stateRef.current = state
})
// If a state property (data, error or isValidating) is accessed by the render
// function, we mark the property as a dependency so if it is updated again
// in the future, we trigger a rerender.
// This is also known as dependency-tracking.
const stateDependenciesRef = useRef<StateDeps>({
data: false,
error: false,
isValidating: false
})
/**
* @param payload To change stateRef, pass the values explicitly to setState:
* @example
* ```js
* setState({
* isValidating: false
* data: newData // set data to newData
* error: undefined // set error to undefined
* })
*
* setState({
* isValidating: false
* data: undefined // set data to undefined
* error: err // set error to err
* })
* ```
*/
const setState = useCallback(
(payload: S) => {
let shouldRerender = false
for (const _ of Object.keys(payload)) {
// Type casting to work around the `for...in` loop
// https://github.com/Microsoft/TypeScript/issues/3500
const k = _ as keyof S & StateKeys
// If the property hasn't changed, skip
if (stateRef.current[k] === payload[k]) {
continue
}
stateRef.current[k] = payload[k]
// If the property is accessed by the component, a rerender should be
// triggered.
if (stateDependenciesRef.current[k]) {
shouldRerender = true
}
}
if (shouldRerender && !unmountedRef.current) {
rerender({})
}
},
// config.suspense isn't allowed to change during the lifecycle
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
return [stateRef, stateDependenciesRef, setState]
}