Skip to content

Commit 644ddb7

Browse files
feat: use dataloader handle enabled changes (#196)
1 parent dc137f4 commit 644ddb7

File tree

1 file changed

+33
-38
lines changed

1 file changed

+33
-38
lines changed

packages/use-dataloader/src/useDataLoader.js

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,17 @@ const useDataLoader = (
5151
pollingInterval,
5252
} = {},
5353
) => {
54-
const { addCachedData, addReload, clearReload, getCachedData } =
54+
const { addReload, clearReload, getCachedData, addCachedData } =
5555
useDataLoaderContext()
5656
const [{ status, error }, dispatch] = useReducer(reducer, {
5757
error: undefined,
5858
status: StatusEnum.IDLE,
5959
})
6060

61+
const addReloadRef = useRef(addReload)
62+
const clearReloadRef = useRef(clearReload)
6163
const previousDataRef = useRef()
62-
const keyRef = useRef(key)
64+
const isMountedRef = useRef(enabled)
6365
const methodRef = useRef(method)
6466
const onSuccessRef = useRef(onSuccess)
6567
const onErrorRef = useRef(onError)
@@ -96,53 +98,46 @@ const useDataLoader = (
9698

9799
useEffect(() => {
98100
let handler
99-
if (enabled) {
100-
if (!isIdle && keyRef.current !== key) {
101-
keyRef.current = key
102-
dispatch(Actions.createReset())
103-
} else {
104-
if (isIdle) {
105-
keyRef.current = key
106-
handleRequest.current(key)
107-
}
108-
if (pollingInterval && isSuccess && !handler) {
109-
handler = setTimeout(
110-
() => handleRequest.current(key),
111-
pollingInterval,
112-
)
113-
}
114-
if (key && typeof key === 'string') {
115-
addReload(key, reloadArgs => handleRequest.current(key, reloadArgs))
116-
}
101+
if (isMountedRef.current) {
102+
if (isIdle) {
103+
handleRequest.current(key)
104+
}
105+
if (pollingInterval && isSuccess) {
106+
handler = setTimeout(() => handleRequest.current(key), pollingInterval)
117107
}
118108
}
119109

120110
return () => {
121-
if (key && typeof key === 'string') {
122-
clearReload(key)
123-
}
124-
if (handler) {
125-
clearTimeout(handler)
126-
handler = undefined
127-
}
111+
if (handler) clearTimeout(handler)
128112
}
129113
// Why can't put empty array for componentDidMount, componentWillUnmount ??? No array act like componentDidMount and componentDidUpdate
130-
}, [
131-
enabled,
132-
key,
133-
clearReload,
134-
addReload,
135-
addCachedData,
136-
getCachedData,
137-
pollingInterval,
138-
isIdle,
139-
isSuccess,
140-
])
114+
}, [key, pollingInterval, isIdle, isSuccess])
141115

142116
useLayoutEffect(() => {
143117
methodRef.current = method
144118
}, [method])
145119

120+
useLayoutEffect(() => {
121+
isMountedRef.current = enabled
122+
dispatch(Actions.createReset())
123+
if (key && typeof key === 'string') {
124+
addReloadRef.current?.(key, reloadArgs =>
125+
handleRequest.current(key, reloadArgs),
126+
)
127+
}
128+
129+
return () => {
130+
if (key && typeof key === 'string') {
131+
clearReloadRef.current?.(key)
132+
}
133+
}
134+
}, [enabled, key])
135+
136+
useLayoutEffect(() => {
137+
clearReloadRef.current = clearReload
138+
addReloadRef.current = addReload
139+
}, [clearReload, addReload])
140+
146141
return {
147142
data: getCachedData(key) || initialData,
148143
error,

0 commit comments

Comments
 (0)