This content originally appeared on DEV Community 👩💻👨💻 and was authored by Rohan kumar
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: true
const 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 💖.
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Rohan kumar
Rohan kumar | Sciencx (2022-12-17T13:31:57+00:00) Are you using useEffect efficiently? 🤔. Retrieved from https://www.scien.cx/2022/12/17/are-you-using-useeffect-efficiently-%f0%9f%a4%94/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.