3rd mistake was one of the mysteries I had encountered during React development. I dont think I've read about setState function versions anywhere on the documentation. Thank you for clearing that up!
Just gonna leave this here again: You're awesome man, you explain stuff so well and really know how to.. well simplify it(its all in the name haha). Keep doing what you're doing man no matter how far I get as a developer myself I'll always have time to watch one of your videos 🤩
ปีที่แล้ว +26
Example 2: use the !! to cast the value of array length to a boolean. E.g: !!array.length
While this does work the solution he showed is much more clear and readable. With just a few more characters you can write out exactly what you want to check for instead of making the reader think around corners. No one cares about saving a few bytes or key strokes if you make the code more readable.
ปีที่แล้ว +1
@@moritz_p I cannot see how casting is less readable since we use negation expressions (!) in daily bases. But anyway, there are lots of ways to achieve the same thing and I just showed one. Regarding "saving few bytes" if you are always working in hobby projects and copying / pasting tutorials from internet you are good to go.
ปีที่แล้ว
Hi@@dancarter5595 . There is no right or wrong. Only different approaches. You can stick with the one is more natural for you. 😊
Lol mistake #2 is a problem that I had in my job just few days ago. Thanks for clarifying. Very enlightening and helpful. The fix turns out to be easy as you explained but I ended up taking a much longer workaround😂
For the second mistake, instead of writting: arr.length !==0 && You can add double exclamation points before the arr.length to cast is as bool, which would look like this: !!arr.length && Keeps the code nice, clean and easy to read. I use this often for empty string and empty arrays
Why do you want obfuscate a simple condition readable by anyone ? arr.length > 0 && or arr.length !== 0 && clearly indicate the intention without any conversion.
Thank you, I didn't know about the setState functional setter. I don't update state often using the previous state value as a base, but it's good to know for when I do have to :)
Got trapped by the second mistake before! One alternative to avoid it is using the ternary operator, which forces developers to think what value to return when the antecedent is evaluated true or false.
Knew all of these, good explanations. Another thing that trips up people that you briefly touched (but didnt explain) was: where does that e come from in that event handler? This is an interesting one because it seems to just be injected magically, and many libraries use that same technique. Amazing work though, wish I could have this level of tutorial 20 years ago lol.
Mistake #3, one of THE Best explanation on this topic. The best thing about the explanation is not a defination rather a practical demonstration of a real -world "actual real-world" scenario. Not a dummy "if a else b something somethig....". Amazing video.
Regarding Mistake #2, I usually use Boolean(x) to make sure the result becomes a boolean value, in that regard, I don't have to make decisions whether it's 0, null etc.
I just use double bang "!!x" when trying to coerce something to boolean, but when doing length checks, I like to be explicit with "arr.length > 0". Not sure why people avoid writing that "> 0", it's not like you save that many characters when typing. I really just like the explicitness of an exact length check such as "arr.length > 0". Whenever I mentor people, I suggest them to use explicit length checks and not rely on JS quirks they don't really understand. If they want to understand those quirks, they can learn them, but writing more explicit code is just way more beneficial for everyone. Boolean(x) is also a really good option because it's super clear that you are trying to get a boolean value.
I just thinking doing stuff like array.length && is unreadable, it should be array.length === 0 to be explicit and that actually makes it more meaningful, especially as it’s almost entirely a JavaScript only thing.
A big thank you for the second error, that is not very well explained in the doc (even in the pitfall section). I was just trying to figure out the "Preserving and Resetting State" first challenge that use the && operator to avoid to reset a state (due to its change of location) but didn't understand why the left side returns anything. Now it's clear, thank you !
One thing that has tripped me is in edge cases where i want to store a function in react state. In that case you /always/ need to use the function version of set state since otherwise the function you pass in would be interpreted as a callback instead of the actual value you want to pass in to update.
The third mistake was very interesting to me because i only learned solid-js thinking that solid was inspired by react. But seeing how cumbersome state in react is vs solid i'm glad i learned solid instead of react
Tell me you don't understand closures, reference equality without telling me you don't 😅 Proxies are fun though. Valtio, immer, etc bring that in an explicit manner.
One great technique in the first example would be using the !! operator. It transforms the value to boolean true or false. And also using the ?. operator.
I was really proud when you explain the third mistake, I saw the code, I knew it will be wrong, what exactly was going to happen and why it happens. But then you show me the function version of setState. I'm blown away. Good job explaining everything.
Regarding mistake #3, the state is declared as const [array, setArray] = useState([1, 2, 3]); indeed, using const implies that the reference to the array variable won't be changed and can't be reassigned within the same render. The setArray function updates the value of the state for the next render, when the array variable will be reassigned with the most up-to-date values. useState always returns an array with the most up-to-date state or with the initial state if it is the first render.
Omg thank you! Use state has been plaguing me for years! I just hacked around it by setting a new variable with prev value, then set state with that temp variable lol
Just to notice that spread operator will blow up performance and speed as its copying array. This problem definitely cause problem with large array, like in react-table before! Thank for greater content 👍
I use functions that create functions often. It’s more of a performance aspect where you don’t want to run code every time the page renders. It’s similar to memorization, but can get complex in its explanation based on the scenario you are using it in.
As a Vue programmer, I find this kind of problem very interesting. Vue has none of these difficulties and updates values or uses functions in a reactive only way. Maybe that's why its learning curve is smaller than React.
For mistake#2: I always short circuit with double exclamation mark (!!). It converts any truthy/falsy value into its true boolean value. ex: const user = null; // Whatever value goes in here, it will be correctly converted into boolean below return ( !!user && User exists );
Regarding Mistake #3: I'd image React effectively does a === check on state variables after every operation to learn if the DOM needs to be re-rendered or not. If you push or unshift items to an array, your array reference does not change, which is why that === check (previousState === nextState) returns true, causing React to not re-render the DOM. This is funny actually, I had situation where if you change another piece of state, the DOM actually re-renders and adds the previously unnoticed state changes.
For simplifying the fix for mistake #2, how about just using !! In front of your short circuit validator. For example !!array.length. This way it’s more generic and quicker to code as compared to explicitly writing out an equal or not equal expression.
I make extensive use of the Boolean() constructor instead of comparison operators. i.e. Boolean(array?.length) as opposed to array?. length !== 0, and you can see why-- if arr is undefined the simple comparison becomes undefined !== 0 which is now true. And the "Boolean" makes the intent very clear compared to !!array?.length
A way that has been recommended to me is using the ternary operator like: {array.length ? ( ) : ( null )} and you can also chain conditions (like else if) in a relatively easy way to read (once you are used to the ternary-operator) {showA ? (
For mistake 2 I usually just turn it into a boolean like this with the double exclamation {!!array.length && (... I am not sure if there is any drawback to this approach
It's more verbose, but using a conditional statement is way more robust than using the && operator for checking truthy values in JSX. So instead of: {array.length && ( )} You can do: {array.length ? () : null} That way, even if the length is 0, or if your user variable somehow becomes 0 or an empty string, it still won't render, and by utilising this pattern consistently, you can be sure that you'll never run into the "0" problem.
Regarding Mistake #1: Is there a performance impact when you create new anonymous functions upon every component re-render, as in the print and doubler cases?
Great video as usual. Calm and cool and very instructive. In another video you showed how your physical phone was linked to the desktop browser in mobile view (I think). I can’t recall which of your videos this was in but can you please provide the link ?
Yeah, I've been using React for a long time, I understand completely the last state using issue, but I wild be lying if I said I didn't spread and update rather than paying as a function last week and it took me about 30 minutes debugging code to figure out that one of my reducers was using the wrong method for updating state. 🙄
1 question if you can answer this - in a function version of setstate , does the component rerenders everytime the state is changed? That's why it's the most up-to-date value of the state ? Or it just changes the state's value but rerenders only once after all the states run ?
For the second example you may just use Boolean(value) to get true/false - it's more generic and you don't have to think if you need to check for 0, null or else.
@@scottbrown-xveganxedgex2799 example would be Boolean (array.lenght) So if array length is 0 it will evaluate to false and if it's greater than 0 it will evaluate as true. You can just simply try it out in a console with a bunch of inputs in Boolean()
In first mistake the second example is considered a bad practice, you shouldn't pass anonymous functions because they would be created anew on each rerender, if you need that number prop - define onClick handler inside the body of .map callback and then pass it in onClick
all those points are very basic, but you showed what will happen if we neglected the possibility of a bug of error being formed. I know first and last one. but the second was knew to me. QUESTION: can we use nullish coalescence for the second one to check for falsy value??
Can you please explain why there are almost no tutorials on react class based components here on YT? and why YTubers prefer only function based react components (including yourself) ??
the #3 mistake there is another solution for it , which is array.push and unshift with setArray([…array]) after all one of them. Also this solve run console.log problem before render
I always get confused how sometimes the function body is passed or sometimes function definition itself even during resolve reject in promises confused me but this video cleared that as well. I already completed the JavaScript Simplified Course and really guys its worth it even now after being launched 2 years back and now the new react simplified course it must be way way better as Kyle's teaching style is improved exponentially. WAITING for heavy discounts when full React simplified Course Comes out. One more Tip: I think your pricing is way high according to India, because our average income is way less then America or Europe. Will be Appreciated if u adjust the pricing for Indian Cards accordingly.
Kindly Post Videos about Chat GPT-4 Basics and How to use to build websites and Applications and API How to use.. Full tutorial about Chatgpt-4... Full Video About ChatGPT-4 API & How to use it to build websites and web applications (or) What SaaS applications we can build.. Full tutorial about Chatgpt-4 & API Use.
If i wanted to squeeze some performance is it safe to wrap my state in a object and mutate the propriety that actually holds my data and then pass a new object with the mutated propriety?
I've been teaching Programming and React for a few years myself. The first mistake is by far the most common beginner/intermediate developers make. Great video!
1:39 Simple event handler, the way to think is you pass react onclick handler something and it's his responsibility to do it, so it's on the button click that particular function would be call, so you basically pass a reference, rule of thumb If you have no args, you can just simply write the function name, but if you just run it, it conveys running it on the first render, also if you want to pass parameters to it, you can't do it so you call a callback function and then do something (args)
13:12 this is why I HATE React the most. We have to keep telling React every time we change something. My entire React code is a bunch of setState functions. But Angular just knows the changes. It “detects” by itself. Angular is smart.
Mistake #3 is one I actually make very often, I spend hours debugging before realizing my mistake
Me also. But now I won't forget this. Really helpful video 😊
3rd mistake was one of the mysteries I had encountered during React development. I dont think I've read about setState function versions anywhere on the documentation. Thank you for clearing that up!
Just gonna leave this here again: You're awesome man, you explain stuff so well and really know how to.. well simplify it(its all in the name haha). Keep doing what you're doing man no matter how far I get as a developer myself I'll always have time to watch one of your videos 🤩
Example 2: use the !! to cast the value of array length to a boolean.
E.g: !!array.length
Is the correct answer
While this does work the solution he showed is much more clear and readable. With just a few more characters you can write out exactly what you want to check for instead of making the reader think around corners. No one cares about saving a few bytes or key strokes if you make the code more readable.
@@moritz_p I cannot see how casting is less readable since we use negation expressions (!) in daily bases.
But anyway, there are lots of ways to achieve the same thing and I just showed one.
Regarding "saving few bytes" if you are always working in hobby projects and copying / pasting tutorials from internet you are good to go.
Hi@@dancarter5595 . There is no right or wrong. Only different approaches. You can stick with the one is more natural for you. 😊
Lol mistake #2 is a problem that I had in my job just few days ago. Thanks for clarifying. Very enlightening and helpful. The fix turns out to be easy as you explained but I ended up taking a much longer workaround😂
I am Slavic, but I have not yet found the best tutors on SLAVIC TH-cam. Thank you, Kyle, for such a clear accent!
For the second mistake, instead of writting:
arr.length !==0 &&
You can add double exclamation points before the arr.length to cast is as bool, which would look like this:
!!arr.length &&
Keeps the code nice, clean and easy to read. I use this often for empty string and empty arrays
Didn't see this before my comment, but yes I do this to. Or Boolean(arr.length) for readability
@@decentrob8126 Or we can also use ternary operator like arr.length ? : null
@@the_kreatives technically yes, but in this case no, since its not "either or"
Why do you want obfuscate a simple condition readable by anyone ?
arr.length > 0 && or arr.length !== 0 && clearly indicate the intention without any conversion.
what about !arr.length || ? Just curious
Thank you, I didn't know about the setState functional setter.
I don't update state often using the previous state value as a base, but it's good to know for when I do have to :)
Got trapped by the second mistake before! One alternative to avoid it is using the ternary operator, which forces developers to think what value to return when the antecedent is evaluated true or false.
Knew all of these, good explanations. Another thing that trips up people that you briefly touched (but didnt explain) was: where does that e come from in that event handler? This is an interesting one because it seems to just be injected magically, and many libraries use that same technique. Amazing work though, wish I could have this level of tutorial 20 years ago lol.
Mistake #3, one of THE Best explanation on this topic. The best thing about the explanation is not a defination rather a practical demonstration of a real -world "actual real-world" scenario. Not a dummy "if a else b something somethig....". Amazing video.
Regarding Mistake #2, I usually use Boolean(x) to make sure the result becomes a boolean value, in that regard, I don't have to make decisions whether it's 0, null etc.
I always use !!someVariable && ()
just use a double bang !!array.length &&
I also prefer using double exclamation marks !! for this mistake #2
I just use double bang "!!x" when trying to coerce something to boolean, but when doing length checks, I like to be explicit with "arr.length > 0". Not sure why people avoid writing that "> 0", it's not like you save that many characters when typing. I really just like the explicitness of an exact length check such as "arr.length > 0". Whenever I mentor people, I suggest them to use explicit length checks and not rely on JS quirks they don't really understand. If they want to understand those quirks, they can learn them, but writing more explicit code is just way more beneficial for everyone.
Boolean(x) is also a really good option because it's super clear that you are trying to get a boolean value.
I just thinking doing stuff like array.length && is unreadable, it should be array.length === 0 to be explicit and that actually makes it more meaningful, especially as it’s almost entirely a JavaScript only thing.
One of your best videos ever. I knew some of this but I am embarrassed I did not know it all. THANK YOU.
A big thank you for the second error, that is not very well explained in the doc (even in the pitfall section).
I was just trying to figure out the "Preserving and Resetting State" first challenge that use the && operator to avoid to reset a state (due to its change of location) but didn't understand why the left side returns anything. Now it's clear, thank you !
One thing that has tripped me is in edge cases where i want to store a function in react state. In that case you /always/ need to use the function version of set state since otherwise the function you pass in would be interpreted as a callback instead of the actual value you want to pass in to update.
Mistake 3 could be a game changer for many beginner, great vid Kyle!
You have natural react skills, but you also have great "follicle karma".
This incarnation you have been blessed.
The third mistake was very interesting to me because i only learned solid-js thinking that solid was inspired by react. But seeing how cumbersome state in react is vs solid i'm glad i learned solid instead of react
😅
Fortunately there's a lib called Immer which essentially allows you to mutate state directly.
but react is far more used in projects also in very large scale project too
Tell me you don't understand closures, reference equality without telling me you don't 😅
Proxies are fun though. Valtio, immer, etc bring that in an explicit manner.
@@huge_letters serious question, why someone would like or need to mutate state directly?
One great technique in the first example would be using the !! operator. It transforms the value to boolean true or false.
And also using the ?. operator.
I was really proud when you explain the third mistake, I saw the code, I knew it will be wrong, what exactly was going to happen and why it happens. But then you show me the function version of setState. I'm blown away. Good job explaining everything.
Regarding mistake #3, the state is declared as
const [array, setArray] = useState([1, 2, 3]);
indeed, using const implies that the reference to the array variable won't be changed and can't be reassigned within the same render. The setArray function updates the value of the state for the next render, when the array variable will be reassigned with the most up-to-date values. useState always returns an array with the most up-to-date state or with the initial state if it is the first render.
You explain concepts so easily! You're the best react tutor in my opinion
The last one gave me a headache few weeks ago. Excellent video!
Thank you very much, can you believe!?. I was programming and made the error "array.push()" stop programming and your video appeared in front of me 🤩
Omg thank you! Use state has been plaguing me for years! I just hacked around it by setting a new variable with prev value, then set state with that temp variable lol
To convert any truthy /falsy value, add !! before the variable.
I.E
{!!array.length && (Array length is truthy)}
Dude! Mistake #1 is something that has been confusing me for forever!! Thanks for finally helping clear that up for me!
really hope the course is available soon!
Just to notice that spread operator will blow up performance and speed as its copying array.
This problem definitely cause problem with large array, like in react-table before!
Thank for greater content 👍
what would be another method, then?
@@pepperdayjackpac4521 Array.from, slice, and concat are all recomended to use when dealing with copying large arrays
Thank you! This was so helpful. The last mistake is one I've made a lot and did not really understand. This was a godsend
I use functions that create functions often. It’s more of a performance aspect where you don’t want to run code every time the page renders. It’s similar to memorization, but can get complex in its explanation based on the scenario you are using it in.
As a Vue programmer, I find this kind of problem very interesting. Vue has none of these difficulties and updates values or uses functions in a reactive only way.
Maybe that's why its learning curve is smaller than React.
For mistake#2: I always short circuit with double exclamation mark (!!). It converts any truthy/falsy value into its true boolean value.
ex:
const user = null; // Whatever value goes in here, it will be correctly converted into boolean below
return (
!!user && User exists
);
Regarding Mistake #3: I'd image React effectively does a === check on state variables after every operation to learn if the DOM needs to be re-rendered or not. If you push or unshift items to an array, your array reference does not change, which is why that === check (previousState === nextState) returns true, causing React to not re-render the DOM. This is funny actually, I had situation where if you change another piece of state, the DOM actually re-renders and adds the previously unnoticed state changes.
I would say better to use (!) or (!!) for the second mistake. What if the something is "null" but we make the triple equal check for "undefined"
Thank you Kyle for these informative videos
That was awesome! Especially the mistake #3. By figuring that out, you will learn the most important logic of both JavaScript and React. Thanks Kyle
For simplifying the fix for mistake #2, how about just using !! In front of your short circuit validator. For example !!array.length. This way it’s more generic and quicker to code as compared to explicitly writing out an equal or not equal expression.
bang bang
I use "!!" but it's slightly less readable for devs who haven't seen it before. "!== 0" is more clear what your intent was.
I make extensive use of the Boolean() constructor instead of comparison operators.
i.e. Boolean(array?.length) as opposed to array?. length !== 0, and you can see why-- if arr is undefined the simple comparison becomes undefined !== 0 which is now true. And the "Boolean" makes the intent very clear compared to !!array?.length
A way that has been recommended to me is using the ternary operator like:
{array.length ? (
) : (
null
)}
and you can also chain conditions (like else if) in a relatively easy way to read (once you are used to the ternary-operator)
{showA ? (
) : showB ? (
) : showC ? (
) : (
null
)}
For mistake 2 I usually just turn it into a boolean like this with the double exclamation {!!array.length && (... I am not sure if there is any drawback to this approach
Thank you, this video is really helpful!
Very Insightful video!
The second one I am using as per your solution but don't have idea about behind it other two mistakes I was familiar from long back
Mistake #1 I can using print.bind(null, number) to an alternative way like create a callback.
One of the best teachers for js!
Thanks for mentioning point 1/2 i might need to revisit my latest project and adjust some code after watching this lol
as always learned smth new. ty!
instead of doing this ()=> print(number) u can do this print.bind(null,number) since bind return a new function it will work !
I agree with these mistakes, I used to do them and I learned them through the hard way. Thanks kyle for bringing this up.
That last example 😘👌 great example!
It's more verbose, but using a conditional statement is way more robust than using the && operator for checking truthy values in JSX. So instead of:
{array.length && ( )}
You can do:
{array.length ? () : null}
That way, even if the length is 0, or if your user variable somehow becomes 0 or an empty string, it still won't render, and by utilising this pattern consistently, you can be sure that you'll never run into the "0" problem.
7:32 THIS is a critical point: the SCOPE of data
Thanks kyle very helpful
Third mistake is my favorite 🎉
Thx a lot
8:00 - UseEffect clean-up functions?
Regarding Mistake #1: Is there a performance impact when you create new anonymous functions upon every component re-render, as in the print and doubler cases?
Great video as usual. Calm and cool and very instructive. In another video you showed how your physical phone was linked to the desktop browser in mobile view (I think). I can’t recall which of your videos this was in but can you please provide the link ?
Kyle's videos are basically an ad for all his other videos lol
Hi. Very good channel. Could you may also make content for angular and ionic?
Yeah, I've been using React for a long time, I understand completely the last state using issue, but I wild be lying if I said I didn't spread and update rather than paying as a function last week and it took me about 30 minutes debugging code to figure out that one of my reducers was using the wrong method for updating state. 🙄
Hey Kyle can you please please make a video on making an extension for manipulating any browser with JSON version 3
There is actually a third value that doesn't get rendered. It's an empty Array [].
It would be great if you also do react native videos
Was so hyped for the course but the React specific one he mentions isn't out yet 😢
Great videos, thanks :)
1 question if you can answer this - in a function version of setstate , does the component rerenders everytime the state is changed? That's why it's the most up-to-date value of the state ? Or it just changes the state's value but rerenders only once after all the states run ?
can you do a video about micro frontend services using react js
9:55 isn't empty string another one of the values? :)
For the second example you may just use Boolean(value) to get true/false - it's more generic and you don't have to think if you need to check for 0, null or else.
Can you give example please?
@@scottbrown-xveganxedgex2799 example would be Boolean (array.lenght)
So if array length is 0 it will evaluate to false and if it's greater than 0 it will evaluate as true. You can just simply try it out in a console with a bunch of inputs in Boolean()
Maybe im missing something here. But why not just use array.length > 0?
In first mistake the second example is considered a bad practice, you shouldn't pass anonymous functions because they would be created anew on each rerender, if you need that number prop - define onClick handler inside the body of .map callback and then pass it in onClick
Very well explained. The last example is something I'll need to keep in mind to not run into it again. 😊
Great explanation 👍😊👌👌
And how can I get the real value of the array in onClick method?
all those points are very basic, but you showed what will happen if we neglected the possibility of a bug of error being formed. I know first and last one. but the second was knew to me. QUESTION: can we use nullish coalescence for the second one to check for falsy value??
!!value && is fine too 👌🏻
Can you please explain why there are almost no tutorials on react class based components here on YT? and why YTubers prefer only function based react components (including yourself) ??
the #3 mistake there is another solution for it , which is array.push and unshift with setArray([…array]) after all one of them. Also this solve run console.log problem before render
thanks man you're a legend.
I always get confused how sometimes the function body is passed or sometimes function definition itself even during resolve reject in promises confused me but this video cleared that as well. I already completed the JavaScript Simplified Course and really guys its worth it even now after being launched 2 years back and now the new react simplified course it must be way way better as Kyle's teaching style is improved exponentially. WAITING for heavy discounts when full React simplified Course Comes out.
One more Tip: I think your pricing is way high according to India, because our average income is way less then America or Europe. Will be Appreciated if u adjust the pricing for Indian Cards accordingly.
Perfect timing!
More succinct would be !!user && or !!array.length &&
The print(number) function also works if we dont write retun in the function body
So, why do we write return?
Kindly Post Videos about Chat GPT-4 Basics and How to use to build websites and Applications and API How to use.. Full tutorial about Chatgpt-4...
Full Video About ChatGPT-4 API & How to use it to build websites and web applications (or) What SaaS applications we can build.. Full tutorial about Chatgpt-4 & API Use.
If i wanted to squeeze some performance is it safe to wrap my state in a object and mutate the propriety that actually holds my data and then pass a new object with the mutated propriety?
Thanks Kyle as always 👍
What about print.bind(param)
thank god we're not using react in my company... I've had multiple times during this video where I just went "wtf that's stupid"
Not sure if it’s a bad practice but on an array.length check for short circuiting I usually add !! at the beginning which will convert the 0 to false
I've been teaching Programming and React for a few years myself. The first mistake is by far the most common beginner/intermediate developers make. Great video!
Thanks man
Thanks a lot!
Excellent!!!
Why people don't talk about bind()?
These mistakes are why I appreciate TypeScript
1:39 Simple event handler, the way to think is you pass react onclick handler something and it's his responsibility to do it, so it's on the button click that particular function would be call, so you basically pass a reference, rule of thumb
If you have no args, you can just simply write the function name, but if you just run it, it conveys running it on the first render, also if you want to pass parameters to it, you can't do it so you call a callback function and then do something (args)
Thats why we use typescript
13:12 this is why I HATE React the most. We have to keep telling React every time we change something. My entire React code is a bunch of setState functions. But Angular just knows the changes. It “detects” by itself. Angular is smart.
Thanks! 😀
Thanks.