better code: useRef is more common for this use case, and doesn't cause linter warning
Massimo Melina committed
Feb 12, 2022 at 10:08 UTC
006b2abc9797e1fc018be7be4db1eea04e785c1c
2 files changed
+8
-8
admin/src/AccountsPage.ts
+2
-2
@@ -30,10 +30,10 @@ export default function AccountsPage() {
30
const [sel, setSel] = useState<string[]>([])
31
const [add, setAdd] = useState(false)
32
const styles = useStyles()
33
- useEffect(() => {
33
+ useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
34
if (isValidElement(res) || !Array.isArray(res?.list)) return
35
setSel( sel.filter(u => res.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
36
- }, [res])
36
+ }, [res]) //eslint-disable-line -- Don't fall for its suggestion to add `sel` here: we modify it and declaring it as a dependency would cause a logical loop
37
if (isValidElement(res))
38
return res
39
const { list }: { list: Account[] } = res
admin/src/api.ts
+6
-6
@@ -1,4 +1,4 @@
1
-import { createElement as h, useCallback, useEffect, useMemo } from 'react'
1
+import { createElement as h, useCallback, useEffect, useMemo, useRef } from 'react'
2
import { Dict, Falsy, getCookie, spinner, useStateMounted } from './misc'
3
import { Alert } from '@mui/material'
4
import _ from 'lodash'
@@ -44,16 +44,16 @@ export class ApiError extends Error {
44
export function useApi(cmd: string | Falsy, params?: object) : [any, ()=>void] {
45
const [ret, setRet] = useStateMounted(undefined)
46
const [forcer, setForcer] = useStateMounted(0)
47
- const [state] = useStateMounted({ loading: false })
47
+ const loadingRef = useRef(false)
48
useEffect(()=>{
49
setRet(undefined)
50
if (!cmd) return
51
- state.loading = true
51
+ loadingRef.current = true
52
apiCall(cmd, params)
53
.then(setRet, setRet)
54
- .finally(()=> state.loading = false)
55
- }, [cmd, JSON.stringify(params), forcer]) //eslint-disable-line
56
- const reload = useCallback(()=> state.loading || setForcer(v => v+1), [])
54
+ .finally(()=> loadingRef.current = false)
55
+ }, [cmd, JSON.stringify(params), forcer]) //eslint-disable-line -- json-ize to detect deep changes
56
+ const reload = useCallback(()=> loadingRef.current || setForcer(v => v+1), [setForcer])
57
return [ret, reload]
58
}
59