I just completed my first React to-do list app without any tutorial today, I found it pretty funny this video in particular came out today and the last example was a to-do list LOL. Great video!
Sorry to be offtopic but does anybody know a method to log back into an Instagram account?? I stupidly lost the account password. I appreciate any tricks you can offer me!
I guess so. But this video is made to promote correct code and show the code that a noob would write, not necessarily just bad-efficiency (but working) code.
Hi Akhil! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
I think for the "pro" version of the list example you could also wrap the selectedTodo with a useMemo, so that it's not recomputed on every rerender but only if the selectedTodoId changes. This can help with long lists and/or when there are many rerenders that happen in a short span, so that you don't have to find it every single time but only when the selectedId changes.
That would mean the selectedTodo wouldn't change, if todos changed but the selectedTodoId didn't. todos would have to be added to the dependency array too.
Hi Abhijith! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
Hi Saman! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
Thank you so much for the information. I just realized I was changing the state directly inside setState, but my app is running fine!! or maybe I haven't done enough testing. Really love that idea of storing reference of original item inside selected state. Thank you.
Hi Rohan! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
Hi, Kyle, thanks you for the video! As I understand pro solution for useEffect with useMemo has the same problem as advanced solution. If you want to add new properties to user object you need to update useMemo dependencies insted of useEffect dependencies
Not exactly, the reason including name and age in the useEffect dependencies is not great is because the useEffect is separate from the creation of the object. If this object was created in another file/component and changed there, it’s possible to forget to go back to this file and change it. With the useMemo solution the dependencies are linked to where the object is created so it would be much harder to forget
One thing to think about here -- with "pro" tooling set up, we'd probably have an ESLint rule that would automatically catch that you are missing items in your dependency array. This would be something displayed in your IDE; and with other tools, you'd be prevented from making any commits in your repository without resolving these types of issues (and you could go even further by having these same checks be done in CI and prevent builds if errors like this are found).
For the pro version of the List example, it would be more efficient to wrap the selectedTodo inside a useMemo: const selectedTodo = useMemo(() => { return todos.find(...) }, [selectedTodoId]) That way, we have no unnecessary reassignments on rerender when the selected todo didn't change
I’m late to the party, but yes, this is the proper way to do it. I realized I’m using the alternative (suboptimal) solution (DO NOT DO THIS): const [selectedTodo, setSelectedTodo] = useState(); useEffect(() => { const newSelectedTodo = todos.find(…); setSelectedTodo(newSelectedTodo); }, [selectedTodoId]); It’s suboptimal because changing the selectedTodo triggers TWO rerenders instead of one. Once when selectedTodoId changes, and another when selectedTodo changes. State changes trigger rerenders! So your solution is better because it uses useMemo, which does NOT trigger rerenders when it changes! I’m going to replace my code with yours right now! :)
If you check his blog article on the derived state he actually mentions this However he said that since it doesn't take too long it isn't necessary and can slow it down by more memory usage However if it's an incredibly long array then yes it's worth it ig
This is so much effort and takes so much js knowledge just to understand this, plus all of the react made up functions... In vue, state change is not async and makes life 5x better so you dont have to listen for state changes in another function, you use vue jus like regular js, making learning progress so much faster
Im learning react for an associate developer position and this series has been super helpful especially for avoiding common mistakes ive definetly encountered some of these myself. Thanks for the videos Boss :)
Hi Prasanna! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
Hi Nijin! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
This video is sooooo helpful! I haven't found this anywhere else and I make these mistakes all the time! This is definitely a go to video that I'm going to recommend to all my colleagues! Thanks a ton for this 😁😁😁😁 Super super helpful! Gonna watch this frequently!
Hi Rahul! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers with experience. Let me know if interested!
Hey Kyle. Love your work. Video request: Can you take us through a wholesome process of setting up a sign up and login portal, preferably using Node, Express and MongoDB? Perhaps you could also add some JWT and then some email notifications (account created/please verify). Most tuts on this subject are either half baked or do not easily demonstrate how to link this with other personal projects users may be creating. Oh, and favourite Pink Floyd album?
Hi Adeete! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
Hi Harshil! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
i’d argue against defaulting to useMemo as it has its own overhead that isn’t really necessary. Only use memo when you need to, like you’re processing something complex.
Hey Kyle, you said "we don't need to re- render every single todo we only need to re-render the one with the key that changed" (meant in JSX loop) timeline: th-cam.com/video/0yzoAbrjV6k/w-d-xo.html It is help rerender only particular component in DOM, but still react calling each component under hood. React will always do that but if you have some huge or heavy logic for each component you might be do not want that all components makes "components functions". Stopp this innitialization can help memoization. If component pasted in HOC 'memo" or extends "PureComponent" you should keep in mind that all props (especially objects and arrays, e.t.c) should have the same reference between renders on themself. For this use hooks useCallback or useMemo. Additionaly want to say that use "memoization only when it is needed, for instance: could prevent unnecessarly re-renders. Notice: memo(PupreComponent). By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument. Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from should ComponentUpdate. DOCS: en.reacts.org/docs/react-api.html#reactmemo @UPDATED.
I love your content, Kyle. Next, can you teach us how to do that guitar lick that is all of your video intros? I suspect you recorded that yourself rather than pulling a sample off the web. I like it and would love to see a demo in action.
Thank you. I actually did pull it off the web since I didn't know how to play guitar back then. I still am just learning to play, but I should learn that lick since it is pretty much my signature sound now.
Could you further elaborate the code line setCount(currCount => currCount - 1) ? I did'nt know that you can pass a function to the setter from useState and there is no value passed for currCount.
CurrCount is just a placeholder. It can be any name you want. setCount(x => x - 1) is the exact same. currCount or x or whatever name you give it references the actual variable count.
18:17 i think it is not necessary to create new value in the new array.. since react will only check whether the state value itself (which is the array has changed) and it would not care about the elements inside of it.. and array.map create a new array.
It is currently not up to date with React 18 but I am working on an update. The course is still up to date with things like hooks thought. React 18 doesn't change too much about React and really only adds a few niche things.
isn't the explanation about the const counter at minute 2:30 wrong? The array is const, not the values inside the array. You can see that in the console, the values are actually changing? the rerender is only triggered by state change via useState and its hook function, so you need to use setCounter to make the page rerender itself. and then the new value is taken from state
How does this line in the pro version of incrementCount() in State Mistakes work? setCount(currCount => currCount + 1) How does currCount know the current value of the count? currCount isn't defined anywhere else in the program.
I think it just takes the previous value and names it whatever you want it (prevValue, currValue, etc...). Just like on onClick events("e" in this case could be also "event" and still this would work). function sayHi(e) { e.preventDefault(); alert("hi"); }
Hey ,thanks for sharing. In the official documentation the examples are always using setState( couter ) directly. Do you have any idea why they didn't mention the function version instead ?
Maybe it's a dumb question. But at 19:00 (talking about the importance of keys), I thought all components re-render if the parent's state/props changes. Does adding "key" really stop it from re-rendering?
Thank you for helping me fix the annoying warnings "React Hook useEffect has a missing dependency" and "A component is changing an uncontrolled input of type undefined to be controlled". Very helpful video series. Keep up the good work! ✌🍻
The setState issue you show in the counter has nothing to do with asynchronous code . The count shows zero because the updated state is only available on the next render. In the scope of the component, count is zero even after calling setCount. After calling setCount you trigger a re render of the component. On the next render count is now 1. I think you may be confused with class components and this.setState, which is async.
@@dimitargetsov9690 Thanks. There is still so much confusion with how hooks work, even from some instructors. Here is a good explanation of what I describe from Dan Abrabmov on overreacted overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-props-and-state
Hi Saiteja! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
Great vid but asynchronous is different from running in the background. Even parallel is different from running in the background. Asynchronous runs on the main thread itself. All of our react app runs on the main ui thread
Hi Rishabh! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
Great video. Really helped me understand what level my react code is at... One question: the main point for using UseMemo was because it could be a pain to have to remember all of the properties in user. But from what I could tell, you would still need to remember the properties and make sure they’re in the useMemo dependency, right??
Agreed. I believe he mentioned a solution to a different problem. Although the problem he mentioned can be easily solved by using destructuring. setMyVar({...oldMyVar, property: changedValue});
And also as I already wrote in my own comment, how is useMemo different from two useEffects and one useState for user? So I could do the same with one useEffect trigger on [name, age] that then setUser({name, age}) and the other, with console.log(user) trigger on [user], or? What's useMemo doing differently here?
useMemo isn't really for the sake of remembering the properties, it is used to help you keep an object's reference after a render. It complements useEffect in the sense that you don't have to (in your effect) somehow verify if the properties *actually* changed or just the reference If the properties don't change, useMemo will prevent the effect from running in the first place
@@dreamyrhodes the problem is that having an effect trigger on [user] without useMemo will trigger on every single render, because it checks for object reference and not value It doesn't really become a problem until your object is very large or your component is really complex but it can become a performance issue
Can someone please explain how he derives the currCount from the count variable? I don’t see currCount being instantiated, or the count variable being passed into the onclick..
These are not mistakes made by junior devs, but by beginners. A junior can write clean code. Mid and senior devs are better than junior not so much in terms of clean code, but in terms of architecture, design and high-level decision making.
5:10 if setCount functions are async and doing updation on single variable, then there may be inconsistencies, like both functions get value 1, assume they are running parallel, then first one set it to 2. then second one has current value 1 then it also set it to 2, Please help
@@arshdeepkumar2586 Not so. The setState issue shown in the counter has nothing to do with asynchronous code . The count shows zero because the updated state is only available on the next render. In the scope of the component, count is still zero even after calling setCount. After calling setCount you trigger a re render of the component. On the next render count is now 1. I think you may be confused with class components and this.setState, which is async. This is an excellent explanation from Dan Abramov overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-props-and-state
@@arshdeepkumar2586 Yeah I can understand that. It takes a long time to truly learn this stuff and it is overwhelming. There is always going to be more to learn, there is no such thing as an expert.
The useMemo code still needs the individual user properties as dependencies. If you add a property to user up the component tree, wouldn't you still have to remember to update the useMemo code?
This is a gem. But please make these kind of videos taking some generic topics like oop. This video is purely on react and the previous ones were better.
It's on React because he released a React course and wants people to check it out. Probably also why a lot of his recent videos are focused around React and React projects.
Thanks! if - setCount(currCount => currCount + 1) is asynchronous, how can I be sure that setCount(currCount => currCount + 1) in the next line get the up to date currCount ?
So first off, the setter is not asynchronous, but is scheduled by React (currently only in event handlers, but may change in the future). In order to always be in sync with each render of the component, you can use `useEffect`. In order to only "filter" for specific values that you want your effect handler to be called on, you can pass dependencies (an array of values) to useEffect, so that you don't need to run your effect more often than needed. Think of the dependencies as a way to say "I want to stay in sync with these values". This encourages separation of concerns, and allows for greater reusability.
I just completed my first React to-do list app without any tutorial today, I found it pretty funny this video in particular came out today and the last example was a to-do list LOL. Great video!
I was stuck on a bug for a long time and this random video helped me solve it. Thank You.
Thank you for continuing this series
You are very welcome! I really enjoy this series.
Great video Kyle! I learned new things ☺️
Sorry to be offtopic but does anybody know a method to log back into an Instagram account??
I stupidly lost the account password. I appreciate any tricks you can offer me!
@@wilsonalvin7606 click forgot password button
Great presentation style! Makes it really easy to see the progression from one version to the next.
Cool tips! Ditch proptypes and go full TypeScript
Awesome! I have grown up as react developer with the help of this series! Thanks man!
Thanks Kyle!
You are a wonderful icon
Thank you!
Because of your videos many of my concepts become more clear
That is awesome!
@@WebDevSimplified 😀🙏
I mean code that doesn't work isn't noob code it's broken code
Agreed. These examples are more like progression from an outline of a code to a more refined version.
I guess so. But this video is made to promote correct code and show the code that a noob would write, not necessarily just bad-efficiency (but working) code.
Broken noob code
Thank you so much for this man! I'm currently learning React so this came right on time!!
Great series. Especially for self-taught developers
Hi Akhil! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
@@shivanigaddagimath6105 Yes I am. You can email the details to akhilbandari9999@gmail.com. Thanks
@@akhilbandari Thanks Akhil! I will send you a mail soon.
Hi Akhil. Please check the mail I have sent you and use the link to connect with me on LinkedIn. Thanks
I think for the "pro" version of the list example you could also wrap the selectedTodo with a useMemo, so that it's not recomputed on every rerender but only if the selectedTodoId changes. This can help with long lists and/or when there are many rerenders that happen in a short span, so that you don't have to find it every single time but only when the selectedId changes.
That would mean the selectedTodo wouldn't change, if todos changed but the selectedTodoId didn't.
todos would have to be added to the dependency array too.
One point to note here is useMemo() is only worth for expensive calculation, otherwise it's just adding more overhead to your app.
Kyle, your videos are amazingly helpful! Keep up this great work!
Wow... Its time to go from Junior developer to Senior developer 😎 Thanks man.🙏
Hi Abhijith! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
thanks, really clarified some of the concepts for me and I now finally understand why I can’t set state and then console.log it on the next line
i have to use a useEffect
Thank you. Your content makes me wanna code when i feel lazy.
same here bro
Hi Saman! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
Thank you so much for the information. I just realized I was changing the state directly inside setState, but my app is running fine!! or maybe I haven't done enough testing. Really love that idea of storing reference of original item inside selected state. Thank you.
Thanx Kyle, keep'em coming
Perfect way of teching. We are lucky to get this content free
Hi Rohan! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
This is the best video I've ever seen on React. Superb Work! Loved it ❤️
As always, excelent work, dude!
Oh, come on. Advanced code is the code that barely works and pro is the one that actually works? Really?
And noob didn’t work at all. Lame
@@sir_brian_d That’s actually the point. Perhaps it would have been clearer if Kyle had titled them: “Good“, Bad” & “Ugly”!
silence nerd
Hi, Kyle, thanks you for the video! As I understand pro solution for useEffect with useMemo has the same problem as advanced solution. If you want to add new properties to user object you need to update useMemo dependencies insted of useEffect dependencies
Not exactly, the reason including name and age in the useEffect dependencies is not great is because the useEffect is separate from the creation of the object. If this object was created in another file/component and changed there, it’s possible to forget to go back to this file and change it. With the useMemo solution the dependencies are linked to where the object is created so it would be much harder to forget
One thing to think about here -- with "pro" tooling set up, we'd probably have an ESLint rule that would automatically catch that you are missing items in your dependency array. This would be something displayed in your IDE; and with other tools, you'd be prevented from making any commits in your repository without resolving these types of issues (and you could go even further by having these same checks be done in CI and prevent builds if errors like this are found).
For the pro version of the List example, it would be more efficient to wrap the selectedTodo inside a useMemo:
const selectedTodo = useMemo(() => {
return todos.find(...)
}, [selectedTodoId])
That way, we have no unnecessary reassignments on rerender when the selected todo didn't change
I’m late to the party, but yes, this is the proper way to do it. I realized I’m using the alternative (suboptimal) solution (DO NOT DO THIS):
const [selectedTodo, setSelectedTodo] = useState();
useEffect(() => {
const newSelectedTodo = todos.find(…);
setSelectedTodo(newSelectedTodo);
}, [selectedTodoId]);
It’s suboptimal because changing the selectedTodo triggers TWO rerenders instead of one. Once when selectedTodoId changes, and another when selectedTodo changes.
State changes trigger rerenders! So your solution is better because it uses useMemo, which does NOT trigger rerenders when it changes!
I’m going to replace my code with yours right now! :)
If you check his blog article on the derived state he actually mentions this
However he said that since it doesn't take too long it isn't necessary and can slow it down by more memory usage
However if it's an incredibly long array then yes it's worth it ig
Great Video Man!
Pro versions helped me a lot, thanks
This is so much effort and takes so much js knowledge just to understand this, plus all of the react made up functions...
In vue, state change is not async and makes life 5x better so you dont have to listen for state changes in another function, you use vue jus like regular js, making learning progress so much faster
Im learning react for an associate developer position and this series has been super helpful especially for avoiding common mistakes ive definetly encountered some of these myself. Thanks for the videos Boss :)
Ano company boss?
You are my best TH-camr!❤️
Hi Prasanna! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
This is what I really wanted.😍😍😍
Thanks a lotttttt @webdevsimplified ❤️😇
Hi Nijin! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
What all are bored in quarantine and learning to code (as a kid)
This video is sooooo helpful! I haven't found this anywhere else and I make these mistakes all the time! This is definitely a go to video that I'm going to recommend to all my colleagues! Thanks a ton for this 😁😁😁😁 Super super helpful! Gonna watch this frequently!
Hi Rahul! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers with experience. Let me know if interested!
So much quality, thank you very much
Very helpful! Thanks!
Hey Kyle. Love your work. Video request: Can you take us through a wholesome process of setting up a sign up and login portal, preferably using Node, Express and MongoDB? Perhaps you could also add some JWT and then some email notifications (account created/please verify).
Most tuts on this subject are either half baked or do not easily demonstrate how to link this with other personal projects users may be creating.
Oh, and favourite Pink Floyd album?
Dark side of the moon!
Please continue this series with next on angular and node.js
Hi Adeete! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
For the last example, in case of a lot of nested data in arrays there is the best solution, IMMER! :D
Awesome video. Just what I needed
Thanks Kyle for these nice tips
this new series is amazing! Would love some more of this, even to just general javascript logic
Another amazing video! You´re helping me more than anyone. Thanks a lot Kyle!
that is a great lesson and toughet me a lot !
thanks for spending time to prepare for this
Really Insightful!! 👌🏻
Perfect video Kyle ❤️
Thanks for this video, helped me a lot!
Hi Kyle. You are the most amazing tutor on TH-cam !
Extremely well thought out content. Love from Pakistan
Extremely useful information right here!!!!
Great video! Even though I have done React for quite a long time professionally I got quite a lot to take home...
I just watch till 3:34... and this is why I'm using VUE. You just can not make this "count" mistake. :D
Thank you so much for all of your efforts ❤️
Hi Harshil! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!
i’d argue against defaulting to useMemo as it has its own overhead that isn’t really necessary. Only use memo when you need to, like you’re processing something complex.
Thanks for your videos.
6:00 in the pro version, where does the currCount come from?
Hey Kyle, you said "we don't need to re- render every single todo we only need to re-render the one with the key that changed" (meant in JSX loop)
timeline: th-cam.com/video/0yzoAbrjV6k/w-d-xo.html
It is help rerender only particular component in DOM, but still react calling each component under hood.
React will always do that but if you have some huge or heavy logic for each component you might be do not want that all components makes "components functions".
Stopp this innitialization can help memoization.
If component pasted in HOC 'memo" or extends "PureComponent" you should keep in mind that all props (especially objects and arrays, e.t.c) should have the same reference between renders on themself.
For this use hooks useCallback or useMemo.
Additionaly want to say that use "memoization only when it is needed, for instance: could prevent unnecessarly re-renders.
Notice: memo(PupreComponent).
By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from should ComponentUpdate.
DOCS:
en.reacts.org/docs/react-api.html#reactmemo
@UPDATED.
Thank you so much, really helped me alot.
I love your content, Kyle. Next, can you teach us how to do that guitar lick that is all of your video intros? I suspect you recorded that yourself rather than pulling a sample off the web. I like it and would love to see a demo in action.
Thank you. I actually did pull it off the web since I didn't know how to play guitar back then. I still am just learning to play, but I should learn that lick since it is pretty much my signature sound now.
20:10 how would you implement this idea using the useRef hook?
Awesome, very deep
Could you further elaborate the code line setCount(currCount => currCount - 1) ? I did'nt know that you can pass a function to the setter from useState and there is no value passed for currCount.
CurrCount is just a placeholder. It can be any name you want. setCount(x => x - 1) is the exact same. currCount or x or whatever name you give it references the actual variable count.
@@mritz579 do you know the technical term for these kinds of expressions?
If we pass a function to setState, the argument to the function (by default) is the previous value.
Amazing video!
무척 도움이 많이 되었습니다.
리액트 처음 슬때 많이 실수하는 것이네요
4:59 good tip, thanks
18:17 i think it is not necessary to create new value in the new array.. since react will only check whether the state value itself (which is the array has changed) and it would not care about the elements inside of it.. and array.map create a new array.
Really helpful 🔥😊
Hey Kyle.
Thanks for your great channel !!!!
Is your full react course is up to date with latest react version (18) ?
It is currently not up to date with React 18 but I am working on an update. The course is still up to date with things like hooks thought. React 18 doesn't change too much about React and really only adds a few niche things.
@@WebDevSimplified OK, i understand. May you grant me a discount code for the react course?
Thank you in advanced, Appreciate your work!
recommend that please make tutorial on C
👍👍👍 your a gem 🔥🔥🔥
Thanks!
@@WebDevSimplified 😀🙏
kyle is a monstaaaaaaaaaaaah
thank you, dude! :D
I really like this series
thanks, now no mistakes in "useEffects", useMemo is quite nice
isn't the explanation about the const counter at minute 2:30 wrong? The array is const, not the values inside the array. You can see that in the console, the values are actually changing? the rerender is only triggered by state change via useState and its hook function, so you need to use setCounter to make the page rerender itself. and then the new value is taken from state
How does this line in the pro version of incrementCount() in State Mistakes work?
setCount(currCount => currCount + 1)
How does currCount know the current value of the count? currCount isn't defined anywhere else in the program.
I think it just takes the previous value and names it whatever you want it (prevValue, currValue, etc...). Just like on onClick events("e" in this case could be also "event" and still this would work).
function sayHi(e) {
e.preventDefault();
alert("hi");
}
Great video✌️.keep doing❤️
Hey ,thanks for sharing.
In the official documentation the examples are always using setState( couter ) directly. Do you have any idea why they didn't mention the function version instead ?
Probably performance.
Maybe it's a dumb question. But at 19:00 (talking about the importance of keys), I thought all components re-render if the parent's state/props changes. Does adding "key" really stop it from re-rendering?
Thank you for helping me fix the annoying warnings "React Hook useEffect has a missing dependency" and "A component is changing an uncontrolled input of type undefined to be controlled". Very helpful video series. Keep up the good work! ✌🍻
They might be annoying, but those warnings are there for a good reason :)
The setState issue you show in the counter has nothing to do with asynchronous code .
The count shows zero because the updated state is only available on the next render.
In the scope of the component, count is zero even after calling setCount.
After calling setCount you trigger a re render of the component.
On the next render count is now 1.
I think you may be confused with class components and this.setState, which is async.
Very eagle-eyed remark!! Thanks!!
@@dimitargetsov9690 Thanks. There is still so much confusion with how hooks work, even from some instructors.
Here is a good explanation of what I describe from Dan Abrabmov on overreacted
overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-props-and-state
@@willadams6217 Thanks for the link.
That's a great explanation. This has tripped me up in online courses, hopefully @Web Dev Simplified corrects this especially if he's offering courses.
@@willadams6217 Thanks!! I did expect something like that!
do these types of videos more
I would love to see a Big project (4 hours) in your channel
Hi Saiteja! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
I love that guitar
Great vid but asynchronous is different from running in the background. Even parallel is different from running in the background. Asynchronous runs on the main thread itself. All of our react app runs on the main ui thread
Hi Rishabh! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.
Great video. Really helped me understand what level my react code is at...
One question: the main point for using UseMemo was because it could be a pain to have to remember all of the properties in user. But from what I could tell, you would still need to remember the properties and make sure they’re in the useMemo dependency, right??
Agreed. I believe he mentioned a solution to a different problem. Although the problem he mentioned can be easily solved by using destructuring.
setMyVar({...oldMyVar, property: changedValue});
And also as I already wrote in my own comment, how is useMemo different from two useEffects and one useState for user? So I could do the same with one useEffect trigger on [name, age] that then setUser({name, age}) and the other, with console.log(user) trigger on [user], or? What's useMemo doing differently here?
useMemo isn't really for the sake of remembering the properties, it is used to help you keep an object's reference after a render.
It complements useEffect in the sense that you don't have to (in your effect) somehow verify if the properties *actually* changed or just the reference
If the properties don't change, useMemo will prevent the effect from running in the first place
@@dreamyrhodes the problem is that having an effect trigger on [user] without useMemo will trigger on every single render, because it checks for object reference and not value
It doesn't really become a problem until your object is very large or your component is really complex but it can become a performance issue
Can someone please explain how he derives the currCount from the count variable? I don’t see currCount being instantiated, or the count variable being passed into the onclick..
These are not mistakes made by junior devs, but by beginners.
A junior can write clean code. Mid and senior devs are better than junior not so much in terms of clean code, but in terms of architecture, design and high-level decision making.
5:10 if setCount functions are async and doing updation on single variable, then there may be inconsistencies, like both functions get value 1, assume they are running parallel, then first one set it to 2. then second one has current value 1 then it also set it to 2, Please help
It's not async. The explanation in the video is incorrect as to how useState works.
@@willadams6217 bro it's async i know, because i have used it
@@arshdeepkumar2586
Not so.
The setState issue shown in the counter has nothing to do with asynchronous code .
The count shows zero because the updated state is only available on the next render.
In the scope of the component, count is still zero even after calling setCount.
After calling setCount you trigger a re render of the component.
On the next render count is now 1.
I think you may be confused with class components and this.setState, which is async.
This is an excellent explanation from Dan Abramov
overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-props-and-state
@@willadams6217 I'm overwhelmed
@@arshdeepkumar2586 Yeah I can understand that. It takes a long time to truly learn this stuff and it is overwhelming. There is always going to be more to learn, there is no such thing as an expert.
would Pro useEffect example work with useCallback as well as with useMemo?
Thank you !!!
Love from India 👍👍
The useMemo code still needs the individual user properties as dependencies. If you add a property to user up the component tree, wouldn't you still have to remember to update the useMemo code?
Yes, but in that case you would have the linter telling you that a value is missing in the dependency array
This is a gem. But please make these kind of videos taking some generic topics like oop. This video is purely on react and the previous ones were better.
It's on React because he released a React course and wants people to check it out. Probably also why a lot of his recent videos are focused around React and React projects.
Thanks!
if - setCount(currCount => currCount + 1) is asynchronous, how can I be sure that setCount(currCount => currCount + 1) in the next line get the up to date currCount ?
So first off, the setter is not asynchronous, but is scheduled by React (currently only in event handlers, but may change in the future). In order to always be in sync with each render of the component, you can use `useEffect`.
In order to only "filter" for specific values that you want your effect handler to be called on, you can pass dependencies (an array of values) to useEffect, so that you don't need to run your effect more often than needed.
Think of the dependencies as a way to say "I want to stay in sync with these values".
This encourages separation of concerns, and allows for greater reusability.
Your videos really help developers, youre awesome dude
Sir, What is currCount? Is it predefined?
Cool T-shirt!
Always clear tutorials. Keep it up
11:40 what is difference between noob and advance version here?
last Pro version of video, the second useState should have a default right? just like what you said from previous video
Clear and concise, nice video !