Thanks for the video, really helped me a lot ! Especially the 12/12 helped me to understand why my states weren't getting updated xD 4/12 - I always try to avoid duplication in my code however, I obey the Rule of Three of "Rules of Thumb" as well. If the logic isn't too long and/or complicated, I might tend to duplicate it instead of abstracting it until the third duplication. 2/12 - not cleaning the interval causes incrementing the count by 2 on my side.
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
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!
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.
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!!!
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.
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 🙏
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
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
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!
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. :)
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.
This video sold me to buy your courses, no faffing, straight into it with clear explanations with pros and cons and solid examples, Im a senior dev, 12 years and just this taught me a lot, cant wait to start the courses tomorrow
In the first section, I think it's important to point out that the setCount function call isn't really being "scheduled". What happens is the function is run top to bottom (it renders the component), and the handleClick function is loaded and attached to the button with the current value of count. When the button is clicked, count is the same for all calls of setCount. For example, if you put a loop inside the handleClick function that takes 5 minutes to complete in between two setCount calls, one button click will still result in a single increment. Promisifying and awaiting has the same effect.
Thanks for saying this. This and some of the other explanations and examples in this video are very misleading and sometimes even flat wrong. It’s crazy how many people are just admiring the effort and taking it at face value without noticing the mistakes/problems. Another obvious example is the explanation about fetching data in useEffect without addressing the asynchronous nature of the fetch api and including practically required concepts such as async/await… There are other bad examples such as the resize listener which if declared as per the example will clear all resize listeners across the whole application and etc. I can keep going, but essentially almost every single example in this video has an issue. And we wonder why junior developers make such mistakes… because they watch videos like this one which demonstrate one type of error only to replace it with another…
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
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.
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.
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? 🤷♂
@@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.
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.
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.
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.
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.
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
@@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
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
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!
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!
38:34 If you leave it as is, your "setInterval" would never be canceled until you close or reload the page. If you call setInterval or setTimeout inside useEffect, always destroy that interval / timeout.
I'm a senior dev but very new to React and modern JS. This was very helpful in showing more idiomatic ways to go about things. Thanks for a great video!
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!
You are really good at teaching. There are lots of good develovers, who create useful content but you are the best among them in tutoring. Very consistent, not emotional, focused only on confusing stuff. I am amazed
11/12 - If you still need to call hooks only if a certain condition is met (like on 03:24), which is often the case in practice, you can: 1) return "No id provided" if there's no id 2) copy and paste the code between the lines 6 and 11 into a separate component in which you call those hooks indiscriminately. 3) return that component instead of lines 6-11.
As a junior developer I can confirm I've made some of these mistakes myself and I see a lot of people still making these mistakes. Thank you very much for this video. Learned some cool tricks and I'll make sure to share it with them whom I see making these mistakes. Cheers.
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 :,)
This is some good stuff 👌. But I think it could be helpful to clarify that at around 35:00, when your "count" is not being incremented by the closure in setTimeout, it's simply because the closure has closed over a "const" variable which will always have the value of 0, it's not that variables are "created" once along with the closure, or that javascript would pass them in "by value". Simply the value of that variable, that was closed over, is unchanged (const). If it wasn't that case and that variables value would indeed change, the closure would know and you'd see the count incrementing. It may be worth mentioning that not all languages are like that, for example in PHP, closures actually are being passed primitive type variables by values 🙂
I personally haven't watched videos from the beginnig to the end like this with tutorials in a long time, but this one has so much useful information that it makes you realize that you can become better.
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 !
I am about to learn react in typescript, and really appreciate your video. It really helps me understand about react hooks and how to do it properly. Hope your days will be great, thank you
I'm still new in React and this video helps me a lot bro. Thank you for this very useful video and I will share your youtube video to my friends as well. Cheers!
Wow bro. You nailed almost all those doubts i had ever in my react journey. You are a perfect teacher with the soothening voice which actually dragged me to listen to this 40mins lecture peacefully with no breaks.
i recently completed my learning in frontend with react and built some basic projects. Decided to watch this 45mins video and i must says its worth it. All the things i have faced in my projects are covered and conveyed in a clever way.
Very (very!) good pacing and tone of voice, coupled with gritty tricks. Love this one ! Thanks for your work ! Just watched out of curiosity after finishing fullstackopen and realized I went over every one of these mistakes during the course.
I really enjoyed the video it is fast yet clear and concise about the details. While watching I was thinking about my previous works and realizing what went wrong and now I learned a lot. Thank you!
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
Hey, Super Video... Can you help me with one doubt.. we have a timer in our page and if we refresh the page the timer should not restart.. can you tell me how to achieve this
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
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 :)
A bit of advice, if you don't want to get stuck with stale states when you're updating your state based on the previous state, always use callback function instead of a raw value inside your updater function. Get used to it and this will save you a lot of time.
@amir7440 to your knowledge are there other cases where not using a callback when setting state presents an issue? Or is this just limited to useEffect?
Stale state can happen anywhere, for instance, assume a situation where you have to update your state twice or more in one single handler function. In this situation you should use callback instead of a raw value, because you will not get access to the fresh state unless you use callback. Just keep in mind that we have a so called batching state updates in this particular situation where react will update all of our states in one go (in one render), so we have to enforce react to use the freshest value on each state update. As I mentioned in my first comment, when you want to update your state based on it's previous value, always use callback and you're good to go.
Using typescript would completely ban the optional props at 3:35. It seems unusual that you'd mount a component without a prop and handle that within an if statement.
I'd been writing handleChange functions very similar to your example on the 3rd clip without fully understanding the syntax. I know the point of that clip was different but it really helped me understand what my handlers are really doing.
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
Great video! This is a really genuine video. I really like how you explain real world scenarios, and not just regular stuff. I also watched your Prisma guide, and this type of videos are really helpful. Thanks Wesley!
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.
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!
Thanks for the video, really helped me a lot ! Especially the 12/12 helped me to understand why my states weren't getting updated xD
4/12 - I always try to avoid duplication in my code however, I obey the Rule of Three of "Rules of Thumb" as well. If the logic isn't too long and/or complicated, I might tend to duplicate it instead of abstracting it until the third duplication.
2/12 - not cleaning the interval causes incrementing the count by 2 on my side.
Thanks, appreciate it!
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
Eagerly anticipating! I know it's going to be great!
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!
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.
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!!!
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.
react is a steaming pile of hot garbage.. lol..
@@nonefvnfvnjnjnjevjenjvonej3384 no cap
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 🙏
That's awesome!
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
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
Fantastic video. Just bought your professional react and nextjs course
Awesome, thank you!
I am a grumpy and impatient senior dev who was soothed by your calm voice and clear explanations. Also learnt a few things. Thanks.
As I was watching, there was this sudden urge to like the video multiple times, even though i'd already liked before.
Learned a lot, thanks!
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!
Glad to hear that
@@ByteGrad Thank You Brother 🙏
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. :)
Haha thanks, appreciate it
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
@@Endrit719 Us bro us.
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.
yep
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 :)
This video sold me to buy your courses, no faffing, straight into it with clear explanations with pros and cons and solid examples, Im a senior dev, 12 years and just this taught me a lot, cant wait to start the courses tomorrow
Awesome, enjoy!
Other channel would make this video about 3 hours long, but you just saved my time just for 47 minutes. Quality content!
In the first section, I think it's important to point out that the setCount function call isn't really being "scheduled".
What happens is the function is run top to bottom (it renders the component), and the handleClick function is loaded and attached to the button with the current value of count. When the button is clicked, count is the same for all calls of setCount.
For example, if you put a loop inside the handleClick function that takes 5 minutes to complete in between two setCount calls, one button click will still result in a single increment. Promisifying and awaiting has the same effect.
Thanks for saying this. This and some of the other explanations and examples in this video are very misleading and sometimes even flat wrong. It’s crazy how many people are just admiring the effort and taking it at face value without noticing the mistakes/problems. Another obvious example is the explanation about fetching data in useEffect without addressing the asynchronous nature of the fetch api and including practically required concepts such as async/await… There are other bad examples such as the resize listener which if declared as per the example will clear all resize listeners across the whole application and etc. I can keep going, but essentially almost every single example in this video has an issue. And we wonder why junior developers make such mistakes… because they watch videos like this one which demonstrate one type of error only to replace it with another…
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
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.
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.
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? 🤷♂
@@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.
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.
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.
I do multiple returns as well because if not, one return can become into a return hell, hard to read and follow
cant we just say:
{loading ? : error ? : }
@@pete531 Yes, but that's not very readable and scalable.
I prefer that way too
@@pete531 most teams I've been on ban nested ternaries to avoid complication in logic that is already highly complex.
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.
As a learning developer, I run across hundreds of baity videos, but this one was really useful
With this video I lerned more in an hour than what I learned in one and a half day searching. Thanks!
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.
Man after learning Solid and Svelte, I'm starting to find React to be so convoluted.
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
It is
@@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
@@DEVDerr They aren't living with copium, they're living with jobs.
@@Angeal98 You can always search for general, not tied to frameworks solutions. Those exist and there is quite a lot of them.
Amazing. I made all of these mistakes when I started with React some years ago. Hope every React beginner's can watch this.
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
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!
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!
38:34 If you leave it as is, your "setInterval" would never be canceled until you close or reload the page. If you call setInterval or setTimeout inside useEffect, always destroy that interval / timeout.
The 7th error would have taken me to long to solve, ty.
I'm a senior dev but very new to React and modern JS. This was very helpful in showing more idiomatic ways to go about things. Thanks for a great video!
Now I'm waiting for 9999 bugs pro developers make when using useEffect.
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!
I watched all the other RUclipsrs and their covering of these similar topics. You by far do it the best!
You are really good at teaching. There are lots of good develovers, who create useful content but you are the best among them in tutoring. Very consistent, not emotional, focused only on confusing stuff. I am amazed
It's really really amazing content
as a junior dev, this video certainly helped me solve a lot of issues I had with my code, thank you!
11/12 - If you still need to call hooks only if a certain condition is met (like on 03:24), which is often the case in practice, you can:
1) return "No id provided" if there's no id
2) copy and paste the code between the lines 6 and 11 into a separate component in which you call those hooks indiscriminately.
3) return that component instead of lines 6-11.
As a junior developer I can confirm I've made some of these mistakes myself and I see a lot of people still making these mistakes. Thank you very much for this video. Learned some cool tricks and I'll make sure to share it with them whom I see making these mistakes. Cheers.
Half id the mistakes mentioned are the ones often committed by beginner developers, not junior developers.
@@ajitkumarsingh871 yes junior and beginner are pretty close in terms of knowledge imo
I am now experienced React developer and this is the must watch video for every React developer , hats off and really appreciate you for this video .
Thanks! Enjoy
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
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 :,)
Nice touch flipping the video as you move from editor to console 😄
Very helpful vids thx
37:55 is really bad, it's not an interval, because every time you set the state it clears and sets a new interval. What a junior mistake!
This is some good stuff 👌. But I think it could be helpful to clarify that at around 35:00, when your "count" is not being incremented by the closure in setTimeout, it's simply because the closure has closed over a "const" variable which will always have the value of 0, it's not that variables are "created" once along with the closure, or that javascript would pass them in "by value". Simply the value of that variable, that was closed over, is unchanged (const). If it wasn't that case and that variables value would indeed change, the closure would know and you'd see the count incrementing. It may be worth mentioning that not all languages are like that, for example in PHP, closures actually are being passed primitive type variables by values 🙂
this video is a pure gold for any React developer, junior and intermediate
I just got through a week of useState and useEffect, and this video helped answer a lot of questions. Keep it up man!
Im a senior angular developer preparing for a react technical interview and this video helped me a lot. Thanks for the dedication
I personally haven't watched videos from the beginnig to the end like this with tutorials in a long time, but this one has so much useful information that it makes you realize that you can become better.
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 !
Thx for the comment. I should look for his course online. I always study javascript with Stephen Grider; thought he was the top dog.
Man you earned a subscribe…. Watched complete video first time without skipping… not juniors I am sure lot of senior devs don’t know these things😂
I am about to learn react in typescript, and really appreciate your video. It really helps me understand about react hooks and how to do it properly. Hope your days will be great, thank you
I'm still new in React and this video helps me a lot bro. Thank you for this very useful video and I will share your youtube video to my friends as well. Cheers!
Awesome thank you!
Wow bro. You nailed almost all those doubts i had ever in my react journey. You are a perfect teacher with the soothening voice which actually dragged me to listen to this 40mins lecture peacefully with no breaks.
i recently completed my learning in frontend with react and built some basic projects. Decided to watch this 45mins video and i must says its worth it. All the things i have faced in my projects are covered and conveyed in a clever way.
Very (very!) good pacing and tone of voice, coupled with gritty tricks. Love this one ! Thanks for your work ! Just watched out of curiosity after finishing fullstackopen and realized I went over every one of these mistakes during the course.
I already knew that we can use one big useState but I had likely forgot it and still used multiples. Thanks for telling these!
it's good mistake collection!
Thanks, appreciate it!
I love the way you present in this video , thus I've searched for redux in your channel I found nothing :(
thanks again for your good content
I really enjoyed the video it is fast yet clear and concise about the details. While watching I was thinking about my previous works and realizing what went wrong and now I learned a lot. Thank you!
best And helpful video so far.....
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 ❤
This was the best insightful react video I've seen. I honestly can say I've been making these mistakes, now am +1 pro, I guess haha
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
Hey,
Super Video... Can you help me with one doubt.. we have a timer in our page and if we refresh the page the timer should not restart.. can you tell me how to achieve this
Hey, did you manage to find a way?
@@Venormous98 I guess the only option is by saving timer in local or session storage, in that way even if we refresh timer does not restart
Thank you soo much, lots of love and support from india 🇮🇳 ❤️
I finally understood the relevance of the spread ... operator with your real world example. Thanks to you
10:30 this part was really help full for me . Thank you bro😅😅
21:55 You could also check if the post is null or not and use that to show if it's loading or not. Helpful video btw 👍
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
7:25 - mandatory oh that's just typescript idiosyncrasy comment. so happy to see it on it's way out.
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 :)
I like this way of explaining. Focusing on one thing at time. Using simple examples that are easy to understand. Nice!
I watched 75% of this video and then bought the course :D. I hope it will be a beneficial course.
Awesome, welcome to the course! :)
Sir, Thanks for your video. Much Love
A bit of advice, if you don't want to get stuck with stale states when you're updating your state based on the previous state, always use callback function instead of a raw value inside your updater function. Get used to it and this will save you a lot of time.
Thanks for the tip. Can you do a code example?
@@AlexanderSuleymanovFX I think what he means is the solution found in the video at: 38:23
setCount((prev) => prev + 1)
instead of setCount(count + 1)
@amir7440 to your knowledge are there other cases where not using a callback when setting state presents an issue? Or is this just limited to useEffect?
Stale state can happen anywhere, for instance, assume a situation where you have to update your state twice or more in one single handler function. In this situation you should use callback instead of a raw value, because you will not get access to the fresh state unless you use callback. Just keep in mind that we have a so called batching state updates in this particular situation where react will update all of our states in one go (in one render), so we have to enforce react to use the freshest value on each state update. As I mentioned in my first comment, when you want to update your state based on it's previous value, always use callback and you're good to go.
@@orere1635 Thank you!
Incredible video. Don't have much else to say but I'm leaving a comment for the algorithm 👍
Bro the from mistake really helpful for me
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 😊
Using typescript would completely ban the optional props at 3:35. It seems unusual that you'd mount a component without a prop and handle that within an if statement.
I'd been writing handleChange functions very similar to your example on the 3rd clip without fully understanding the syntax. I know the point of that clip was different but it really helped me understand what my handlers are really doing.
Great video especially the pace at what you presented. It was 👌No time wasting and just kept going.
Great content ! I had to watch till the end to make sure I wasn't doing some junior mistakes 🤣
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
Great video! This is a really genuine video. I really like how you explain real world scenarios, and not just regular stuff. I also watched your Prisma guide, and this type of videos are really helpful. Thanks Wesley!
After I watched this video, I purchased your 2 course. I liked your style. Thank you…
to save cycles, your total at 14:00 could be wrapped in a useMemo(..., [quantity]). This is especially good if your calculation is intensive..
useMemo here would be bad. You are right if it was an expensive calculation, but useMemo is not free. You would be hurting performance in the case.
One of the best videos out there! Definitely going through all of the other videos! The tone of your voice is also relaxing!!
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.
this was very helpful
I agree! 😉
I used to learn these The hard way 🤦♂️😂 but still i learnt some new stuff. Thanks! This is really helpful 👍
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.
Thanks! Gracias
Thanks, appreciate it!
Create more videos like this.... These are the best bcz these concepts and mistakes developers interact with in their coding daily.
If React devs are still having trouble initializing variables/state, boy... am I concerned.
Ok senior
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!
As others have said you are a fantastic teacher. Please make a course on Qwik. We need a voice like yours.
One of the best react videos I have watched. Simple yet wholesome 👍