Are you using useEffect efficiently?

Hi reader, In this article, I will be explaining to you how and where you can avoid useEffect in your code, but first, let's see some common mistakes.

Many experienced developers struggle with the nasty dependency array of useEffect because of the primitive and non-primitive data types.

Example:

const a = 1;const b = 1;a === b// Output: trueconst a = {};const b = {};a === b// Output: false

So we need to be very careful when we are using non-primitive data types as dependencies, because even though they may look like unaltered data, they may not be so. Instead of using it directly, we may want to use their properties as dependencies.

Ok, now let's see, How one of our most famous react hook (useEffect) looks like:

useEffect(() => {  // Do something  return ()=> {/*cleanup*/}}, [/*dependencies*/]);

Here as the name suggests we can use this hook where we have any effects, but the key point is it is not for all effects.

I. First one is You don't need useEffect for transforming data:

Here developers think that's an effect when items change and set the total to the new number of items. But you don't need to call useEffect unnecessary you can directly do:

If your setState is heavy(expensive operation) you can wrap in useMemo hook.

II. Second one is You don't need useEffect for fetching data:

Many times developer do this to cancel an API request if we navigate away or wants to cancel it.

We should avoid this kind of useEffect and in place of this we should use packages like (React query, Remix, or new Use() react hook) because fetching in useEffect leads to problems like:

• Race conditions

• No instant back button

• No initial HTML content

• Chasing waterfalls

III. Third one is You don't need useEffect for communicating with parents:

Sometimes developers want to call parent function inside child conditionally like this:

But the issue here is we are dealing with additional rerendering.

So, for solving this issue we have to forget the effects and move them closer to where the state changes:

IV. Fourth one is You don't need useEffect for handling user events:

Many developers use useEffect for checking loading state and then conditionally run effects like this:

useEffect(() => {   if(!isLoading) return;   submitData(); }, [isLoading]);

instead of this we can put our side-effect inside of the event handler:

onSubmit(){   if(!isLoading) return;   submitData(); };

So, after all these points, I think you get an idea about what I am trying to convey useEffect is for synchronization not for all the effects.

Thank you very much for reading my first post. If you like it. Please give it a heart .