posts/react-context-mutex

[giscus[bot]]

posts/react-context-mutex

Make sure you can lock a process from running multiple times and unlock it when it's allowed to run again

https://www.marcveens.nl/posts/react-context-mutex

[derekantrican]

Hi, I'm trying to do a similar thing and I came across your library. However, I don't know if it's because I'm still fairly new to React hooks, not great with async/await, or just because I currently have covid and can't concentrate very well but I'm having trouble trying to make it do the thing I'm trying to do. Maybe you can give some advice?

Basically, I have a component that calls an API for some data - pretty simple. However, the auth for that API is through temporary tokens. Basically, request a temporary token, then request your data with that token and you're good. But I don't want to create a temporary token for every single instance of this react component in my app. I'd like a way for all these requests to "await" a single token request, then all continue once that finishes.

Thinking about "locking" and "mutex-ing" the token request led me to your library and I was able to force just a single token request to happen - but the mutex.run just skips for additional requests while it's locked (meaning the subsequent data requests aren't waiting on the token). I don't believe there's a way to have it instead block additional requests instead? (until it completes)

Let me know if you have any thoughts and if I'm (probably) thinking about this all wrong. Thanks!

[marcveens]

Hi @derekantrican, sorry for responding so late! I think I wouldn't use this library for your scenario. What I would do is build a wrapper function for all API calls you need to make, let's say fetchWithToken. When you need to fetch some data, run that fetch through the fetchWithToken function. In that function, you check if the token is there and if it's still valid. If it is, hooray, run fetch and return the data. If it isn't present or valid, do the call first to get your token, and then run your fetch command. That way you build that function once, and you never need to worry about this functionality again!

Hope this helps you, otherwise definitely let me know!