You should Avoid these React useEffect Mistakes

Thanks to David Kourchid!

💯💯👍

Where do event listeners go? I usually put it in the useLayoutEffect

I was thinking if its better to wrap the logic in to a class and expose all actions in functions and result of that actions in properties of the class. For example, a have a table where a need to edit a value or sort, filter, selections and convert the list in a array of itens for pagination. You have only to sync one useState to save and update the state of the class each time you call some function of the class that changes all his properties. By the way thanks for the vid, aways aprecciate your content.

Great video. Quick question how is it different from ngOnInit() or ngAfterViewInit()?

make a complete video on react query

It's weird how YT is flooded with "don't use useEffect" videos after that conf, almost like it should never be used XD

hi wnna ask you what is the diffrence between use costum hooks and use simple function

useEffect makes sure that you are running the code in the last updated state

ok now I'm happy to not use useEffect anymore even I was struggling with it so now I'm happy about it thank u bro

I usually tell my devs I work with, if your data fetching with use effect --> use react query. Pretty much everything you would be using the use effect hook you can probably use react query. I find myself only using this hook now and then to check mounting or maybe some very small side effect that react query imo would be a bit beefy to add for something like that.

I think i'll continue to use useEffect to fetch data, downloading a library just for one fetch call (I'm working with Micro-frontends, so lots of small apps) in my app seems an overkill.
it might not be the best way, but it works like a charm and it's not as cumbersome as presented

```
const totalPrice = cartProducts?.reduce((p, c) => p + c.price, 0)

// not the same as
const [totalPrice, setTotalPrice] = useState(0);

useEffect(() => {
if (cartProducts) {
const total = cartProducts.reduce((p, c) => p + c.price, 0)
setTotalPrice(total)
}
}, [cartProducts])
```

the are not the same, because the second version is actually correct.
First one will hold `undefined` or integer in `totalPrice` variable, while in the second example it will be only integer.

TBH I was hoping a more native way to handle data fetching instead of just promoting react-query.

dude is calling useEffect bad practices saying "it makes no sense" since this is what everyone was taught this way when hooks launched 💀 this just sound like self pleasure pointing out things you know; anyway the video is informative at least

Looks like my comment was removed. Sad.

Don't use useEffect but rather extra library that internally use useEffect - really smart choice. I have been working on enterprise management system with React and useEffect were and still will be my choice. I would always prefer to create custom hook whenever I feel that some common and repetitive logic can be extracted and reused, rather than jumping and relaying on 3rd party library for such a simple tasks.

I have been using VueJs almost for 2 years, then i switched to react, and i will tell u, react is a pain in the ass, i spent a lot of time not knowing why in the hell there is a delay when updating an array, very annoying issue.

Great video, but you didn't explain why should i use react-query over native useEffect to fetch data. what's wrong with useEffect here and why i need a external library the do the thing ??

Last attempt. There is no problem with “useEffect” + “fetch”, when you use the react-query, it does exactly this, but hidden this to you with the lib API, this information on the video is misleading. Please address this, you are misleading the community.

tbh, if you look at inside react query, they also pretty much clearly used useEffect when fetching the data.
I mean, hook is always made by useEffect. adding the extra library to also use useEffect isn't that efficient, but very effective if you are worried about time coz react query simplify a things not make it better

what is wrong with changing state in useEffect (if its not causing endless execution loop)?

Do you have example to use react-query when you want set data in a select-input??, i could not to do it then i used useEffect :c

Thank you ! Very nice and useful tutorial.

Incredibly useful video, it helps me code much better in terms of code quality, thanks <3

I really appreciate this, well detailed content, Thanks a lot <3

i dint understand a shit in this video yes i know cos i am beginner for react but still grinding
and such code affraid be because this think is not making any sence to me .. but indeed its doing some imp tasks

Since when does xstate simplify code and make a developer's life better? Is this an advertisement? There is such a boilerplate that horror)

very amazing, i can't find in your github where this source code is

Uh, while in some cases I agree that useEffect should not be used (like data transform), in other I strongly disagree (data fetching, as someone pointed out, don't use useEffect, instead use library that internally uses useEffect anyway, increasing app bundle and possibly code complexity in this process - really...?), video lacks detailed explanation WHY you should not use it.

Thank you it’s a very good video

I don't think the point on data fetching holds true. Data fetching with useEffect is not a mistake - sure there's helper libraries, but that doesn't mean data fetching goes against what useEffect should be for. And while you do mention that the react docs say this is a valid use case for useEffect, this can still cause confusion and be misleading to beginners.

Wow, the useffect hooks is really powerful, even though you are using react query you still had to use useEffect

Amazing!

what if I do not use tanstack query, how would I fetch data then? ofc I would make the call in the useEffect. tanstack/react-query is lib for data fetching and state management,

so writing hooks to do the same thing only provides readability not a difference in any functionality. It is still using the useffect to handle inside the hook so what is even the point of doing this. i am solely asking in terms of functionality?

sorry bro but your voice destroy me ears :/