React hook: useAsyncValue

Question

I wrote this little hook so I could fetch some remote resources:

import {DependencyList, useEffect, useRef, useState} from "react";

export default function useAsyncValue<T>(cb: () => Promise<T>, deps?: DependencyList): T | undefined {
    const [value, setValue] = useState<T | undefined>(undefined)
    const nonce = useRef(Symbol())

    useEffect(() => {
        const current = nonce.current = Symbol()
        Promise.resolve(cb()).then(result => {
            if (nonce.current === current) {
                setValue(result)
            }
        })

        return () => {
            nonce.current = Symbol()
        }
    }, deps)

    return value
}

Use is like:

const value = useAsyncValue(() => fetch("..."))

I added a nonce and some deps too so if you do:

const value = useAsyncValue(() => fetch(`/get?foo=${foo}`), [foo])

Then you value will always be the latest result, and you won't have any results out-of-order bugs from older fetch returning after a later fetch.

Are there any problems with this? I don't need to pass the counter into the useEffects deps list do I?

BorisTB · Accepted Answer · 2022-09-02 11:48:18Z

3

Your solution is really good, I like that you're using Symbols, but you don't really need to use ref as variable defined in useEffect stays in scope of single useEffect call.

So you can just do this:

import { DependencyList, useEffect, useState}  from "react";

export default function useAsyncValue<T>(cb: () => Promise<T>, deps: DependencyList = []): T | undefined {
    const [value, setValue] = useState<T | undefined>(undefined)

    useEffect(() => {
        let aborted = false;

        Promise.resolve(cb()).then(result => {
            if (!aborted) {
                setValue(result)
            }
        })

        return () => {
            aborted = true;
        }
    }, [cb, ...deps])

    return value
}

Playground example

edited Sep 2, 2022 at 11:48

answered Aug 27, 2022 at 20:37

BorisTB

1315 bronze badges

1

\$\begingroup\$ Thanks! What about cb -- does it need to be in deps? Or will it always refer to the latest version? \$\endgroup\$

mpen
– mpen

2022-08-28 02:48:44 +00:00
Commented Aug 28, 2022 at 2:48
\$\begingroup\$ Oh yes, good point. In this case cb should be in deps. I'll edit my answer \$\endgroup\$

BorisTB
– BorisTB

2022-09-02 11:47:13 +00:00
Commented Sep 2, 2022 at 11:47
\$\begingroup\$ The issue now is that the caller has to be very careful to wrap cb in useCallback themselves or it'll trigger the effect repeatedly. I think if you wrap cb in a ref instead, then whenever deps change it will invoke the current version of cb and avoids the repeated calling issue, without putting the burden on the caller to wrap it. It's kind of weird one though because if you do change the cb but not the deps, I guess one would expect it to get invoked immediately, but you usually don't do that. \$\endgroup\$

mpen
– mpen

2022-09-02 21:41:16 +00:00
Commented Sep 2, 2022 at 21:41

Add a comment |

Stack Exchange Network

React hook: useAsyncValue

1 Answer 1

You must log in to answer this question.

Hot Network Questions

React hook: useAsyncValue

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions