You should Avoid these React useEffect Mistakes

📚 Learn to write cleaner React code with the new SOLID React book:

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 ✅

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[NihilismEnjoyer]

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

[ofektsoref]

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

[case]

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.

[milospavlovic]

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.

[ashwanikumar]

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

[ashirbad]

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 ??

[cheiguerabdelwehab]

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.

[Equilibrier]

Thank you ! Very nice and useful tutorial.

[redaelouahabi]

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

[szymonbazynski]

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

[jethrangomez]

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

[AhmadMughal]

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?

[krome]

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.

[olusanyaolamide]

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

[soniablanche]

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

[zakidzz]

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

[alroyfernandes]

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

[Salah-YT]

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

[ShinSpiegel]

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.

[SetsunaKiryuKengan]

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