All 12 useState & useEffect Mistakes Junior React Developers Still Make in 2024

Рет қаралды 792,791

Күн бұрын

Hi, I'm Wesley. I'm a brand ambassador for Kinde. I'll help you master the latest tech here:
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Intro
0:06 12/12 - State updates aren't immediate
2:35 11/12 - Conditional rendering
4:46 10/12 - Updating object state
7:59 9/12 - 1 Object state instead of multiple smaller ones
11:25 8/12 - Information can be derived from state / props
14:32 7/12 - Primitives vs non-primitives
19:05 6/12 - Initializing state with object
22:12 5/12 - TypeScript mistakes
27:19 4/12 - Not using custom hooks
30:59 3/12 - Server & Client components
33:08 2/12 - Stale closure
38:42 1/12 - Fetching in useEffect
#webdevelopment #programming #coding

Пікірлер: 722

@ProgramWithErik 8 ай бұрын

This is crazy how much you've blown up in the last month! I saw you've created nearly 400 videos in one year, getting 50-100 views per video until recently! It's really inspiring how you never gave up!

@ByteGrad 8 ай бұрын

Haha true. Switched up the style a bit!

@mhsanto6495 7 ай бұрын

I am a self-taught frontend developer. I know many teachers who teach online, but trust me, the way you explain things is so easy to understand. To me, you are the best teacher. I can't thank you enough. If I had money, I would have definitely bought your courses. Anyways Thank you so much for giving us your valuable time, and I love you.

@nonefvnfvnjnjnjevjenjvonej3384 14 күн бұрын

react is a steaming pile of hot garbage.. lol..

@mhsanto6495 14 күн бұрын

@@nonefvnfvnjnjnjevjenjvonej3384 no cap

@Bukosaure 8 ай бұрын

I am now quite experimented with React and already knew everything you covered in the video. But I still want to say that this video is pure bomb. The amount of useful information contained in it is quite impressive and really straight to the point. I would have love to have seen it about a year ago. :)

@ByteGrad 8 ай бұрын

Haha thanks, appreciate it

@Endrit719 8 ай бұрын

same here, I just came to see the content but it's really helpful for the beginners, at some point I was making all these mistakes

@SSG_GAMING_000 7 ай бұрын

@@Endrit719 Us bro us.

@aleksandrS3894 4 ай бұрын

For me, as a backend developer it’s a pure gem. Everything I should keep in mind in a one video. So easy to refresh knowledge when I had to make some UI parts.

@thezackprager 3 күн бұрын

"Reference is like a box" is probably the best analogy for pass by reference I have heard to date.

@theshahbazahmad 8 ай бұрын

Brother you solved many of my doubts. You have no idea how helpful and important these kind of videos are for me. Keep making such videos. Full support mate!

@ByteGrad 8 ай бұрын

Glad to hear that

@darklord9500 8 ай бұрын

@@ByteGrad Thank You Brother 🙏

@bushbuddyplatypus 3 ай бұрын

I am a grumpy and impatient senior dev who was soothed by your calm voice and clear explanations. Also learnt a few things. Thanks.

@crizwiz489 8 ай бұрын

I really love how direct and precise it is with handle certain react problems. Please do more of this format of videos.I learnt a lot and I appreciate you man. Keep it up

@oru8185 5 ай бұрын

The first case actually helped me a lot! At my job I was fixing a bug and couldn't figure out why component state was behaving wierdly, tourns out it was the multiple setState (although not direct) calls in one useEffect that were the problem

@rushboy1971 6 ай бұрын

Absolutely fantastic video. As a kinda newbie to NextJS and REACT, I was happy that I'd figured out most of these on my own, but some of them (the object item name in brackets trick) will really help get my code leaner.

@adamd0ggg2 8 ай бұрын

I definitely prefer multiple returns. Most components end up with distinct states that make breaking it down into more declarative components easier to follow. This a personal choice I adopted from React Query tutorials. if(loading){ return } if(error){ return } return If you add a key to PostBody then React will identify each of those components as unique. That will eliminate the race condition and reduce the dependencies in the useEffect Array. Loved your explanation of the setInterval. I never quite understood the problem there.

@joseluisperez5137 8 ай бұрын

I do multiple returns as well because if not, one return can become into a return hell, hard to read and follow

@pete531 8 ай бұрын

cant we just say: {loading ? : error ? : }

@shivambisht9009 8 ай бұрын

@@pete531 Yes, but that's not very readable and scalable.

@ImKeviin9 8 ай бұрын

I prefer that way too

@user-sw1wq8lh2w 7 ай бұрын

@@pete531 most teams I've been on ban nested ternaries to avoid complication in logic that is already highly complex.

@tomkatdev 8 ай бұрын

A really great run through of correct patterns and component lifecycles mate, As someone who is 2 years into react, and 9 months or so into ts, I found this a really nice way to confirm my existing understanding, and clear up a few points I had only somewhat understood. Thanks for this :)

@alessandrospiridigliozzi7943 7 ай бұрын

One of the best videos on React!!!! I've been working as a dev with react for over 1 year now and there were a lot of things in this video that I did not know! Most online courses never fully explain what happens underneath the hood, so thank you!!!

@personal3314 8 ай бұрын

You somehow have managed to address every one of my concerns or gaps I believed I had in my knowledge across all your videos on react and Javascript. Thank you 🙏

@lukas.webdev 8 ай бұрын

That's awesome!

@elidonmorina 7 ай бұрын

Great one! Straight to the point, typical and practical life examples! Keep it up and the volume a bit up for the future videos haha

@AveN7ers 8 ай бұрын

Man after learning Solid and Svelte, I'm starting to find React to be so convoluted.

@DEVDerr 8 ай бұрын

Because it always was. Even with better alternatives (Solid and Svelte as you've mentioned... and more), to this day so many React devs are living with a React copium

@gamevidzist 8 ай бұрын

It is

@Angeal98 8 ай бұрын

@@DEVDerrit's not copium, I just want an existing ecosystem of packages. Component libraries, styling solutions, utility components, specific solutions libraries etc. They all exist for react and not svelte nor Solid

@ColossalMcBuzz 8 ай бұрын

@@DEVDerr They aren't living with copium, they're living with jobs.

@Salantor 8 ай бұрын

@@Angeal98 You can always search for general, not tied to frameworks solutions. Those exist and there is quite a lot of them.

@user-ov5wg9qd8h 4 ай бұрын

이야 강의가 너무 기가 막혀요🥰👍 궁금했던 부분을 시원하게 긁어주는 기분이네요 감사합니당

@Namespace_Manny 8 ай бұрын

I just got through a week of useState and useEffect, and this video helped answer a lot of questions. Keep it up man!

@memaimu 4 ай бұрын

I think I need new speakers.

@codefrite 8 ай бұрын

Incredibly dense content full of nice tricks, best practices and clear concepts explanations. It felt like learning "the right way" of coding things in modern JS. This is the first video I watch from you and it made me buy your Udemy JS course. I'll be spending the day watching it. Looking forward for a TS course :) Cheers from Belgium !

@romaneaugustin2462 5 ай бұрын

Thx for the comment. I should look for his course online. I always study javascript with Stephen Grider; thought he was the top dog.

@mikeh8498 8 ай бұрын

Great video. These quick reminders are very helpful! Especially because you often see multiple ways of doing the same thing but no one explains why it works.

@aadispare3673 6 ай бұрын

The best thing happened to me in recent times is your video popping up on my youtube homepage suggestions. So much clarity and valuable information. Subscribed and will surely recommend your channel to every React dev in my circle

@dandheedge 7 ай бұрын

It's always so good to get a basic understanding like this!

@Grozny446 4 ай бұрын

thanks a lot, useful video. i'm not a begginer but often i don't think about to do some more cleaner if it works. you have fixed my mind

@siddharthjoshi3328 8 ай бұрын

Saw this video, loved your straight to the point style and even bought your JS course for the projects it covers. Thanks

@bennzeppelin 5 ай бұрын

Nice touch flipping the video as you move from editor to console 😄 Very helpful vids thx

@snakesoul 8 ай бұрын

As a learning developer, I run across hundreds of baity videos, but this one was really useful

@unknownChungus 8 ай бұрын

Last tip is good but abort controller will not abort calls on the api side which can further stress the api server in some cases.

@Lalit-yw2tb 7 ай бұрын

I learnt all these things by trial and error while using react in my project. This is such a brilliant video that is going to help any new developer starting with react/nextjs to avoid the pitfalls. This video is jampacked with information. Such an amazing channel.

@raves_r3177 Ай бұрын

I am a self-learning newbie in React and you sir just made learning React a lot easier! Simple, straight to the point, no unnecessary stuff. The time I saved by watching this video instead of scouring the docs is priceless. Thank you very much.

@levantos 8 ай бұрын

Amazing video, watching it from start to finish. Loved it. A React Context and prop drilling best practices would be be amazing as well

@Larriisama 2 ай бұрын

This was really helpful, I recognize a few mistakes I've done and though I've worked around the errors, your explanations gave me a better understanding to why I saw errors or such. Really cool vid and most of all thanks for sharing. I've just recently gotten serious about next.js but before that I used to fetch data in a useEffect much like you said

@maurov2104 8 ай бұрын

This video shows how counterintuitive React is!

@ansonwoohk1984 7 ай бұрын

Thanks! Great for me as a new React Developer from Angular

@phucnguyen0110 8 ай бұрын

I gotta thank the algorithm for recommending me this video, Wesley! You solved so many things that I was curious in the past! And with Udemy having a big sales event atm I might just grab both of your CSS + JS courses!

@Digitalknifeparty 8 ай бұрын

Likewise. Video has been helpful. I have several years of experience with JS, CSS, HTML, etc, but only been using React for 6 months or so. Just learned about using Vite over CRA the other day 😅 Hopefully I can land a React job soon!

@Imam.Mehdi_ 8 ай бұрын

Brilliant,,, very concise video ,, keep going make full course on react js

@adnanniaz77 8 ай бұрын

Amazing content and the way of explanation (smooth and calm). Keep it up, would love to see more on React/TypeScript and probably Jest in the future :)

@_jovian 8 ай бұрын

Great stuff but another one is having a loading state depend on the truthiness of data. If that fetch fails, that loading state will displaying for quite some time.

@goodtimeswerehad 4 ай бұрын

Fantastic video! First one of yours I've come across (thanks KZfaq). I'm now a subscriber

@jennisonb37 7 ай бұрын

I have just started learning react and this video was extremely helpful. It's super clear and understandable. Thank you.

@asztonselecta965 6 ай бұрын

Thank you so much. I love the way you teaching. I working as a junior react developer for 2 years already, but still this video helps me a lot. Great job

@Iza90bela 7 ай бұрын

and just when i say i grasped react here bytegrad comes to drop new knowledge , thank you sir again i learned css and js from you ! now i cant wait for your nextjs course i was planning to learn it in the future. you really changing my life :,)

@RoyiaiHackersChristo 8 ай бұрын

Amazing. I made all of these mistakes when I started with React some years ago. Hope every React beginner's can watch this.

@stavroskefaleas6320 8 ай бұрын

This guy is a rock star tutor!Amazing video!

@count_of_pizza 8 ай бұрын

Not only Junior React developers but also mids, so called seniors and all kind of full-stacks who have no idea about JS. Fantastic video :)

@RalfSchlindwein0 8 ай бұрын

As a rookie reactjs developer i skipped many fundamentals and jumped straight to the code. Now i see how such concepts was important. thx for your time doing such a helpful video.

@anoopisaac 8 ай бұрын

Great content, good insight into how react works and simplify coding. But not sure about the stale closure you explained. I think setInterval still has reference the 'count' variable and it gets value out the count variable using lexical context but issue here is when the component is rendered, reactjs discards previous 'count' variable which still holds 0 and creates a new one while the 'setinterval' still refers to the old one.

@aadispare3673 6 ай бұрын

The interval was created at the time of mounting of the component, when the count was 0. Since it wasn't cleared in the first example, it lived in the context with lexical access to count=0. The count changed on every render, but interval wasn't destroyed/recreated to have access to the latest count value.

@timkoprivnik9875 5 ай бұрын

really, really good explanation of everything! thanks a lot for that video. would love to see more.

@john_dren 8 ай бұрын

I finally understood the relevance of the spread ... operator with your real world example. Thanks to you

@omaribbrahim 8 ай бұрын

This video is amazing! Kudos. It warms my heart that I am still an intern and all of this is basically muscle memory at this point.

@TheCodeHunter 2 ай бұрын

as a junior dev, this video certainly helped me solve a lot of issues I had with my code, thank you!

@VictorSilvaDev 8 ай бұрын

I like how you go straight up to the point. Great video. +1 subscriber

@alexandergrigoryan3359 8 ай бұрын

this video is a pure gold for any React developer, junior and intermediate

@Adventures_English 6 ай бұрын

I watched all the other KZfaqrs and their covering of these similar topics. You by far do it the best!

@mj2758 7 ай бұрын

Please more of this with other hooks. Thank you so much

@luciopereirabrito3154 7 ай бұрын

That's amazing thank you a lot for this video!

@bikukist5 2 ай бұрын

Thank you for the insights. You clarified my doubts with this video with mistakes that I overlook those features sometimes even I work on them. Thank you for helping out to everyone sharing your knowledge in react and other tech stack.

@aviaduvdevan 5 ай бұрын

Great video! You really take the time to explain everything and you do it very well

@tabaraksohail7764 8 ай бұрын

I almost knew everything but that prev in useState is gonna be really helpful, to set the by using the most updated one, really appreciate the help thankss

@CaptTragedy 8 ай бұрын

The biggest mistake I made as a Junior Developer is thinking I can get into the industry after pissing away thousands of dollars in a full stack bootcamp because I thought it was the right decision.

@basmong 8 ай бұрын

I like that all the details are also discussed. Great video.

@razintailor 7 ай бұрын

this content is really helpful. the nuances discussed are both detailed yet put in simple language. thanks alot

@indrajitadhikary6989 6 ай бұрын

With this video I lerned more in an hour than what I learned in one and a half day searching. Thanks!

@beko9858 7 ай бұрын

this video is GOLD , thank you

@BrunoSilva-vw4uo 6 ай бұрын

The video is totally necessary! Good job dude!

@albertgouws13 6 ай бұрын

Great video especially the pace at what you presented. It was 👌No time wasting and just kept going.

@positronalpha 5 ай бұрын

I've been developing JS for 25 years, so I'm not really making the mistakes you list, but I'm only two weeks into React and this was a great crash course on its basic mechanisms. Between the lines, you managed to make it much more clear than the horrible hand-wavy official documentation which reads like it was written by people who don't know the basics of the language.

@IgorYatskiv 5 ай бұрын

Do you like hooks overall? I'm around 15 years into JS development. But I hate functional programming with all that half/solutions. Why would anyone prefer functions over better structured, more clean classes (long awaited) syntax and OOP approach in general? 🤷‍♂

@rayaqin 5 ай бұрын

@@IgorYatskiv I started React development when hooks were not yet available, and I like this new functional approach much more. I very rarely have to resort to creating any classes in very special cases.

@positronalpha 4 ай бұрын

The way I see it, classes in JavaScript and TypeScript are a less-than-useful hack that don't work in any way like I'd expect. For me, the simplicity of prototypal inheritance, functions and closures are the beautiful bits of the language. That said, I think the state of the JS/TS ecosystem is really sad and avoid it whenever possible, even though I love writing JavaScript.

@ecodersofficial 14 күн бұрын

I already knew that we can use one big useState but I had likely forgot it and still used multiples. Thanks for telling these!

@keithlamontdavis8047 8 ай бұрын

This is extremely helpful. Thank you!

@lukas.webdev 8 ай бұрын

I agree! 😉

@luizeduardo8545 28 күн бұрын

Nice video, I'm on my first big React project and your video helps me a lot, thank you very much!

@rubenramirezdev 7 ай бұрын

Thank you for this video. #9 really helped me out!

@lionmike247 8 ай бұрын

This video is well explained! So useful and great for review. Excited for your course!

@NekoMimiMeowr 6 ай бұрын

glad I watched this video because I learned more things and I can use the form object state for the first React project I'm currently doing 😊

@mealishahbaz 8 ай бұрын

This is really an amazing video, you cleared a lot of ambiguities about react.

@gabrieldonnantuonilima3719 8 ай бұрын

Nice video! But I'd like to correct the 3/12 mistake. It's not the component that imports that can be turned into a client component, if so all the tree would be turned into it if you had a client component on the leaf of the tree. Actually, the one being imported that can change. So if you have a client component and import a server component into it... that server component will be turned into a client component.

@chhavimanichoubey9437 7 ай бұрын

these tips are what every dev need right now.

@osamaxz5720 2 ай бұрын

thanks so much for sharing this info for free because I never saw a free course giving like this useful info. You are from the rare people man ❤

@411sev 6 ай бұрын

A well presented tutorial. Concept are explained very clearly with very short but good examples to facilitate understanding. Thank you very much.

@eliaspaulinho8435 8 ай бұрын

this explains a lot !!!!! i now understand!!!! thank you🙏

@Reydraenei 7 ай бұрын

With one video you made me want to subscribe in a matter of seconds. Your voice and the way you are explaining and presenting it is pure satisfaction. Already subscribed everywhere!

@jotasenator 8 ай бұрын

I have to say that this is amazing. Looking forward the next course.Subscribed and passing the link to begginers

@saurabh75prakash 7 ай бұрын

This is an excellent refresher for intermediate react devs. Thanks 🙏

@TOMA21207 8 ай бұрын

This is just plain and easy to follow video with a lot of great advises, thank you.

@lukas.webdev 8 ай бұрын

I agree! 😉

@ShanaSkydancer 3 ай бұрын

Great video! I love the way you teach! Thank you for all the effort you put into this! 🙂

@puopg 8 ай бұрын

For the last one, tbh I would just use a debounce with no leading trigger. Since then no network call goes out and only fires once you’ve “settled” This way you never hammer ur server until the user has essentially stopped

@tek9ine130 8 ай бұрын

Can you elaborate a bit on how you would achieve that in Nextjs?

@puopg 8 ай бұрын

Errr, this isn’t a framework thing, just javascript. Say you just use lodash.debounce, it would basically just be Const myDebouncedFn = _.debounce(myFn, 250, { leading: false }); And then just swap the method out in this case for the video

@codemonkeybusiness 8 ай бұрын

My thoughts exactly. Either that or disable the button while the HTTP call is running

@krvns 6 ай бұрын

This is 46 minutes of pure gold! Thank you!

@mohammedsaber6782 7 ай бұрын

Great man, Keep going. It's helpfull.

@deebo5284 6 ай бұрын

Been a while since I touched React, and when I did try it out, I just did a few small projects. It was a good intro, but I feel like I retained little. But watching this was so much fun. I'm excited to try it again soon!

@UzairSalim-dy3uz 8 ай бұрын

Would love to see more videos like these subscribed!!

@victorsaisse1340 8 ай бұрын

I new all of them except for the last one, amazing!

@AlexanderMihailov-tx8pk 8 ай бұрын

[2/12] while cleaning Intervals is kinda ok you can also use setTimeout in that specific example. Apart of real "prev" solution ofc

@nsicolo 8 ай бұрын

Thank you so much! This really boost our knowledge up

@spookyskellyskeleton609 3 ай бұрын

thank you, I was overusing useEffect in some cases. If possible can you make a video in detail specifically for this case

@lucasa8710 8 ай бұрын

quick counter point on the 8:01 topic, using a single object to store the state of all the inputs will produce a lot of objects, the garbage collector will run more times and the component will update all the inputs that depend on the `useState` which can, some times, reduce performance significantly. By using separate states your component will update way less and create less objects and use less garbage collection cicles