Use a mutex lock to prevent callback duplication, now used as a React hook
npm install react-context-mutexuseEffect which ran the fetch function.
ts
import { useMutex } from 'react-context-mutex';
const useFetchHook = () => {
const MutexRunner = useMutex();
const mutex = new MutexRunner('myUniqueKey1');
mutex.run(async () => {
mutex.lock();
try {
const response = await fetch('http://myurl');
const data = await response.json();
mutex.unlock();
} catch (e) {
mutex.unlock();
}
});
};
`
The useFetchHook hook can runs multiple times but the actual fetch is only done once. When the mutex is unlocked again, the fetch can also be executed again.
API
Create a new instance of the mutex runner:
`ts
const mutex = new MutexRunner('myUniqueKey1');
`
Try to run a function. If the mutex is not locked, the resolveCallback will run. If it is locked, the optional rejectCallback will run:
`ts
mutex.run(resolveCallback: () => void, rejectCallback?: () => void) => void
/*
Usage: mutex.run(() => { yourFunction(); });
or:
mutex.run(
() => { yourFunction(); },
() => { myMutexIsLocked(); }
);
returns void
*/
`
Lock a mutex:
`ts
mutex.lock() // returns void
`
Unlock a mutex:
`ts
mutex.unlock() // returns void
`
Check if a mutex is locked:
`ts
mutex.isLocked() // returns a boolean
`
Behind the scenes
Behind the scenes there's an array of strings, representing the mutex keys, registered using React context. A new record is added to the array when a process should be locked. Likewise, the record is removed when the process is unlocked.
When using the mutex.run method, there's a check to see if the process is locked or not. If it is, the callback within the mutex.run` is abandoned. If the provided key does not reference to a locked process, the callback is executed.