How to go async with useEffect

Fernando Abolafio
3 min readMar 25, 2021

Execute asynchronous tasks with useEffect clean and safely

From calling an API to set a timeout delay, I am sure you already questioned how to do it properly when using the React hook useEffect . If that sounds still blurred, then this article is for you. If not, you may at least learn a different approach to get the job done or feel more confident while doing it.

I will present 3 ways of doing it safely and tidy. But first, I want to show what you should NOT do.

What you should NOT do ❌

Don’t do the async task directly in the useEffect, instead, ALWAYS wrap your async task into a function and only call it from the useEffect.

Here is an example of what you should NOT do:

useEffect(async () => {
await getData();

The code above would block the effect, which is no good. The function passed into useEffect must remain strictly synchronous.

Also, doing what this BAD example showed, would lead to a React error:

Effect callbacks are synchronous to prevent race conditions.

Alright, now we are safe to move on to the good practices ⬇️

1. Defining the async function inside the hook



Fernando Abolafio

Programmer — Modeling Revenue in code @GrowblocksHQ — Writing about Web Dev/React/Remix/NextJs — Software Architecture