You should Avoid these React useEffect Mistakes
Vložit
- čas přidán 7. 06. 2024
- We have all used and worked with useEffect, and we always get into weird situations where using useEffect seems cumbersome or wrong. If you misuse useEffect it could lead you to unnecessary multiple re-renders or even unexpected bugs and behaviours of your UI components.
In this video, we'll explore the most important aspects you should keep an eye on when using React.
⭐ Timestamps ⭐
00:00 Intro
01:06 useEffect - from the React creators
02:34 01 - Transforming Data
05:19 02 - Handling Events
08:12 03 - Fetching Data
10:31 04 - Large Components
12:53 05 - Advanced Logic
Watch This 👇 👌
Why I avoid useEffect For API Calls and use React Query instead ✅
• Why I avoid useEffect ...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
It's weird how YT is flooded with "don't use useEffect" videos after that conf, almost like it should never be used XD
Tbh I think as long as React is recommending them, we should use them. Too many youtubers claims to know "better".
@@StamyIIReturn yep, useEffect was made to be used! Instead of going to the extent of external libraries to avoid it as if it's something really bad for the app.
I don't know why it started happening, so many CZcamsrs making dumb videos just for a sake of making videos.
But it's good in one way, that way the world will be balanced with really good devs and dumb devs.
Kidding...
Also always easier to make banal content about don't do X than having to present various architecture methods in various scenarios. Obv viewership ROI has the short term monetary interests of creators held hostage
Ya i have noticed this.
Amazingly concise summary! But on 8:50, you return the cleanup function after awaiting the fetch in the same async function and therefore it would not return until the fetch returns. A better approach would be to put the abort outside the async function and therefore it could be aborted even if fetch has not returned yet. Thanks for the great content btw.
I really appreciate this, well detailed content, Thanks a lot
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
Incredibly useful video, it helps me code much better in terms of code quality, thanks
Thank you ! Very nice and useful tutorial.
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.
up vote, this is true. every hook always made by useEffect, so react query also made by useEffect XD
YEAAh, that exactly what I believe , we prefere having more control / freedom over 'over-engineering'
What's insane is this isn't just some dude saying "You should totally use this third-party dependency", no, *this is the React development team's official stance on data fetching*
When the official documentation literally says not to use the built-in tooling, you know something's gone horribly wrong.
was looking for this comment to see if there still are sane people ....
Great video. Quick question how is it different from ngOnInit() or ngAfterViewInit()?
Amazing!
Thank you it’s a very good video
what is wrong with changing state in useEffect (if its not causing endless execution loop)?
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 ??
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
Where do event listeners go? I usually put it in the useLayoutEffect
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.
Wow, the useffect hooks is really powerful, even though you are using react query you still had to use useEffect
useEffect makes sure that you are running the code in the last updated state
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.
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
@@infoharian8442 I think your wrong. React Query has so many hooks baked in, it be in efficient to write half that yourself. I get what your saying but React Query is a standard and if you have a large team you can enforce a standard rather than have everyone write their own hooks. If your worried about bloat or something other than that maybe you shouldnt be using React. I never insisted using the library in replacement for a few useEffect calls, but if your managing state or data fetching it's top notch and actually is more efficient and straight forward -- like I said it enforces consistency. And patterns for a team to follow.
@@infoharian8442 Tell me you don't understand what react-query does without telling me you don't understand what react-query does
very amazing, i can't find in your github where this source code is
💯💯👍
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
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
@@infoharian8442 ok bro thx for the info
there's a lot of misconception in this video, but thank you for sharing...
3:30 doesn't look like a good practice, it would recalculate the total on every render which is not ideal if the cartProducts did not change at all.
yes, a useMemo would have been cleaner in my opinion. Although, he is right about not using useEffect in that case
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.
What you described exactly matches the purpose of useReducer() hook
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?
hi wnna ask you what is the diffrence between use costum hooks and use simple function
Custom hooks are used when you want to separate out a functionality that can be reused (maintaining and allowing actions on its own state and, exporting the state and functions to alter it) in other components.
For example let's say you want your number of components to have paginated API calls and don't want to use external library, you can create a custom hook which will maintain its own inner state of current page , total responses and all.
Now this hook can be used in multiple components, and even in same component, multiple times to manage two different pagination states and actions.
Other examples is managing the online status of your friends on your social media app across components (from react docs)
You can head over to react docs as well, they're really well written 🙂
@@akshaysharma30498 thank you soo much
Thanks to David Kourchid!
For what ?
@@RudraSingh-pb5ls useMachine
make a complete video on react query
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
```
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.
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.
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.
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
TBH I was hoping a more native way to handle data fetching instead of just promoting react-query.
not to mention this is just almost just a video reaction to that state-machine talk on react-brussels, lol
This video is a good summaryof official react docs and in those docs (beta ones) it is clearly stated that they want us to use react-query and like instead of useEffect.
@@case6339 Yes sir I see that but I think it's just me, I just hoped there's a non-3rd-party solution for it.
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
Looks like my comment was removed. Sad.
Nice to see that this channel allows people to show when the author of the content fails to explain stuff.
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
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.
Since when does xstate simplify code and make a developer's life better? Is this an advertisement? There is such a boilerplate that horror)
This is actually the best example of click baiting. One if the worst react video in youtube.
true, react query also used use effect inside it XD adding extra library just to simplify fetching data also too much overkill
sorry bro but your voice destroy me ears :/