CODEWITHSUNDEEP
javascriptreactjsreact-hooks
alpo
alpo

Reputation: 19

useEffect and event listeners

I need to update a database after an event is emitted from contract. I'm concerned about instances where the contract emits another SomeEvent before the DB operations finish, causing the useEffect to retrigger before the first update is complete. Is this a genuine concern and how is it usually handled?

    useEffect(() => {
        contract.on("SomeEvent", (_a, _b) => {
            ...perform DB operations here!
        })

        /* Handle unmounts */
        return () => {
            contract.removeAllListeners("SomeEvent");
        }
    }, [])

Upvotes: 0

Views: 194

Answers (1)

Hao Wu
Hao Wu

Reputation: 20669

One way to do it is to make the event listener a promise chain, so the next event only runs after the previous event finishes (by awaiting the asychronous function).

useEffect(() => {
    let queue = Promise.resolve();

    contract.on("SomeEvent", (_a, _b) => {
        queue = queue.then(async () => {
            // perform async DB operations here!
            await dbOperation(_a, _b);
        });
    });

    /* Handle unmounts */
    return () => {
        contract.removeAllListeners("SomeEvent");
    }
}, [])

Upvotes: 1

Related Questions