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.
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.
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.
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!!!
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.
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
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.
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…
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.
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'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!
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.
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
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.
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
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 🙏
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
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.
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.
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 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
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
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
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
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.
Nice video! Regarding the conditionnal rendering I would add to be careful with using it with numbers, for example: 0 && Hello will return the p tag, as it is not a falsy value for JS.
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!
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.
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.
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.
- for 9/12 (reverse numbering, confusing) I'd usually use useReducer instead of useState. Basically the same thing but your handleChange function becomes the reducer function and gets declared outside of the component. I'd also suggest introducing switch statements here to handle non-text inputs. - In 6/12 you are using two states for related things that might as well be an object state. How about a status prop (loading, error, success) and a data prop with the data. If written correctly this type would also address issues in 5/12. For one if my projects I made type ApiState = { status: "loading" | "error", data?: undefined } | { status: "success", data: T }; - In 3/12 the problem with not having access to window and localStorage should not even be new to next.js users, since next.js already had SSR before, which has the same issue. No need to confuse people with server components for this. - 2/12 is basically the same as 12/12 where the value of `count` is not immediatly updated. The only difference is that eslint-plugin-react-hooks would've been yelling here. - Love that in 1/10 you call your type PostBodyProps. I've seen way too many iProps types in my days and it's confusing me so often. This naming scheme makes sense because you can immediatly see which component the type belongs to. The whole "don't fetch in useEffect" myth is nonsense tho. What do you think tanstack query and SWR do? Exactly, they also use fetch inside useEffect. I really wish people would stop spreading this myth and instead point at the common oversights people have when first attempting to use fetch in React. Just saying "don't do this" doesn't help anyone.
Big fan of reducers too. They seem to scare too many people away, but I like being able to declutter the components by moving the business logic of the handlers outside. It also allows us to start writing dispatches based on behavior instead of having to repeat state setting logic. I think introducing reducers and memoization in this video would certainly have been valuable for juniors. Also, thank you, I too see the "don't fetch in use effect" spread everywhere. People just hear that and parrot it constantly. In reality, they just have never properly used a clean up function, which this video actually does a great job of explaining, ironically.
also in 1/12: the issue is not fetching in useEffect here, but fetching without AbortController he shouldn't mention it as "don't fetch in useEffect" but "use mini libs for fetching because they help you with some use cases" and 11/12 is more of a personal preference than a mistake... in general: most of those React "mistakes" have nothing to do with React but with missing basic JS knowledge. people should stop using frameworks before learning the language.
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 also can add an important thing: if you want to call setState in any promise - you should check if the component is still alive before. This is the most common mistake even among sr. engineers
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.
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!
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 !
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 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.
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 🙂
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
This videon should be named without Junior, I was working in a couple of projects written by the developers with 2-3 years of experience and I still met such mistakes in the code with a dozens of useState for inputs or other staff, explained in this video.
The video is great. You really fast tracked me into the react shenanigans. Also how did you edited the video? Are you using something automatic to cut the silent parts?. The end result is great, the video feels like is going 2x and keeps me engaged at the same time. You have my like and sub.
Very well explained as always :) I am starting a position as a jr. dev now in September and this video was such a great review of React concepts. I have one comment about the chapter "Primitives vs non-primitives": when we need to run useEffect whenever one of the attributes of the object change, one thing that we can do is put [JSON.stringify(object)] on the useEffect dependencies. That will convert the object into a string (primitive) and then any changes in the object would change the value of this string, triggering the useEffect to run!
feels hacky. just list out individual properties using obj.attribute. Chances are, you don't really care about the updates of all of the object properties. I could be wrong though
For Number 9: When my component starts getting to that level of complexity, I just opt for useReducer instead of useState because from experience that greatly reduces headaches down the road as the component grows with new requirements and functionality.
Excellent video. For the stale enclosure section, you should still have the clean up function for the setTimeout even if you are using the setCount((current) => count +1) method. The interval needs to be cleaned up when the component is unmounted.
I also add the point: stateSetters arent asynchronus functions. Ther are synchronus functions. You cannot use await with them. React dispatches the setterMethod immediately, but it schedules to state update and try to optimize rerenders for current scope. So, it "will" update the state in the future
I am a grumpy and impatient senior dev who was soothed by your calm voice and clear explanations. Also learnt a few things. Thanks.
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
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.
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.
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!!!
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
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.
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.
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…
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.
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'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!
As a learning developer, I run across hundreds of baity videos, but this one was really useful
If React devs are still having trouble initializing variables/state, boy... am I concerned.
Ok senior
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.
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
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 :)
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.
Im a senior angular developer preparing for a react technical interview and this video helped me a lot. Thanks for the dedication
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
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!
Amazing. I made all of these mistakes when I started with React some years ago. Hope every React beginner's can watch this.
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!
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.
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!
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.
As a beginner in React , I can confidently say that this video is a must watch
The fact that I could guess every solution as soon as you started presenting the problem really makes me happy of my evolution as a react developer.
Congrats buddy! 😉
me too, I can't believe my self either..
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 just got through a week of useState and useEffect, and this video helped answer a lot of questions. Keep it up man!
as a junior dev, this video certainly helped me solve a lot of issues I had with my code, thank you!
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
Can you elaborate a bit on how you would achieve that in Nextjs?
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
My thoughts exactly. Either that or disable the button while the HTTP call is running
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
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
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
this video is a pure gold for any React developer, junior and intermediate
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!
Fantastic video. Just bought your professional react and nextjs course
Awesome, thank you!
Nice video! Regarding the conditionnal rendering I would add to be careful with using it with numbers, for example: 0 && Hello will return the p tag, as it is not a falsy value for JS.
0 is falsy in js
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!
This video shows how counterintuitive React is!
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!
With this video I lerned more in an hour than what I learned in one and a half day searching. Thanks!
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 started my react journey a year ago or so. I’ve made these mistakes. It’s nice a year later for me to say, ‘not this time. I know better now…’
The 7th error would have taken me to long to solve, ty.
One of the best videos out there! Definitely going through all of the other videos! The tone of your voice is also relaxing!!
After I watched this video, I purchased your 2 course. I liked your style. Thank you…
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!
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.
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.
I finally understood the relevance of the spread ... operator with your real world example. Thanks to you
- for 9/12 (reverse numbering, confusing) I'd usually use useReducer instead of useState. Basically the same thing but your handleChange function becomes the reducer function and gets declared outside of the component. I'd also suggest introducing switch statements here to handle non-text inputs.
- In 6/12 you are using two states for related things that might as well be an object state. How about a status prop (loading, error, success) and a data prop with the data. If written correctly this type would also address issues in 5/12. For one if my projects I made type ApiState = { status: "loading" | "error", data?: undefined } | { status: "success", data: T };
- In 3/12 the problem with not having access to window and localStorage should not even be new to next.js users, since next.js already had SSR before, which has the same issue. No need to confuse people with server components for this.
- 2/12 is basically the same as 12/12 where the value of `count` is not immediatly updated. The only difference is that eslint-plugin-react-hooks would've been yelling here.
- Love that in 1/10 you call your type PostBodyProps. I've seen way too many iProps types in my days and it's confusing me so often. This naming scheme makes sense because you can immediatly see which component the type belongs to. The whole "don't fetch in useEffect" myth is nonsense tho. What do you think tanstack query and SWR do? Exactly, they also use fetch inside useEffect. I really wish people would stop spreading this myth and instead point at the common oversights people have when first attempting to use fetch in React. Just saying "don't do this" doesn't help anyone.
Big fan of reducers too. They seem to scare too many people away, but I like being able to declutter the components by moving the business logic of the handlers outside. It also allows us to start writing dispatches based on behavior instead of having to repeat state setting logic. I think introducing reducers and memoization in this video would certainly have been valuable for juniors.
Also, thank you, I too see the "don't fetch in use effect" spread everywhere. People just hear that and parrot it constantly. In reality, they just have never properly used a clean up function, which this video actually does a great job of explaining, ironically.
also in 1/12: the issue is not fetching in useEffect here, but fetching without AbortController
he shouldn't mention it as "don't fetch in useEffect" but "use mini libs for fetching because they help you with some use cases"
and 11/12 is more of a personal preference than a mistake...
in general: most of those React "mistakes" have nothing to do with React but with missing basic JS knowledge. people should stop using frameworks before learning the language.
Now I'm waiting for 9999 bugs pro developers make when using useEffect.
Nice touch flipping the video as you move from editor to console 😄
Very helpful vids thx
I already knew that we can use one big useState but I had likely forgot it and still used multiples. Thanks for telling these!
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!
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 👍
Number 11:
When you show them intervals with the 'easy' way in the end. You still need to clear the intervals on unmount in the useEffect!
That's what I was thinking of, isn't he going to clean it? 😅
[2/12] while cleaning Intervals is kinda ok you can also use setTimeout in that specific example. Apart of real "prev" solution ofc
you also can add an important thing: if you want to call setState in any promise - you should check if the component is still alive before. This is the most common mistake even among sr. engineers
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😂
these tips are what every dev need right now.
This is 46 minutes of pure gold! Thank you!
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.
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!
Create more videos like this.... These are the best bcz these concepts and mistakes developers interact with in their coding daily.
I watched all the other TH-camrs and their covering of these similar topics. You by far do it the best!
이야 강의가 너무 기가 막혀요🥰👍 궁금했던 부분을 시원하게 긁어주는 기분이네요 감사합니당
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.
Brilliant,,, very concise video ,, keep going make full course on react js
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.
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 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.
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
I like this way of explaining. Focusing on one thing at time. Using simple examples that are easy to understand. Nice!
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 🙂
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
A well presented tutorial. Concept are explained very clearly with very short but good examples to facilitate understanding. Thank you very much.
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 ❤
in the fetch case, you have a mistake if have a error in fetching the loading is still working you can set false to setLoading also in catch
U can make setLoading false in the finally block too.
Very useful👏. Especially 14:05 this section, I have been doing unnecessary hooks all my life!
This videon should be named without Junior, I was working in a couple of projects written by the developers with 2-3 years of experience and I still met such mistakes in the code with a dozens of useState for inputs or other staff, explained in this video.
The video is great. You really fast tracked me into the react shenanigans. Also how did you edited the video? Are you using something automatic to cut the silent parts?. The end result is great, the video feels like is going 2x and keeps me engaged at the same time. You have my like and sub.
17:00 best explanation
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! :)
Very well explained as always :) I am starting a position as a jr. dev now in September and this video was such a great review of React concepts. I have one comment about the chapter "Primitives vs non-primitives": when we need to run useEffect whenever one of the attributes of the object change, one thing that we can do is put [JSON.stringify(object)] on the useEffect dependencies. That will convert the object into a string (primitive) and then any changes in the object would change the value of this string, triggering the useEffect to run!
Yep, that’s a nice trick. Could have some performance issues with large objects
feels hacky. just list out individual properties using obj.attribute. Chances are, you don't really care about the updates of all of the object properties. I could be wrong though
@@jawyor-k3t I think it really depends on the behavior you want for your component
For Number 9: When my component starts getting to that level of complexity, I just opt for useReducer instead of useState because from experience that greatly reduces headaches down the road as the component grows with new requirements and functionality.
Thanks! Great for me as a new React Developer from Angular
Thank you soo much, lots of love and support from india 🇮🇳 ❤️
This guy is a rock star tutor!Amazing video!
Great tutorial! Can you please come up with a 2nd part of this video?
Not just junior’s , it was really helpfull for me as a senior dev. Subscribed❤️
Excellent video. For the stale enclosure section, you should still have the clean up function for the setTimeout even if you are using the setCount((current) => count +1) method. The interval needs to be cleaned up when the component is unmounted.
I also add the point: stateSetters arent asynchronus functions. Ther are synchronus functions. You cannot use await with them. React dispatches the setterMethod immediately, but it schedules to state update and try to optimize rerenders for current scope. So, it "will" update the state in the future
Thank you for helping me overcome my imposter syndrome :)
you are a great teacher!, thanks!