3 Beginner React Mistakes That Can Ruin Your App

[@LePhenixGD]

Mistake #3 is one I actually make very often, I spend hours debugging before realizing my mistake

[@omega.developer]

Me also. But now I won't forget this. Really helpful video 😊

[@ferdiebeer]

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!

[@ViktorKarpov-o8h]

There is no mistery. Compenent rerenders id state changes. React considers state changed if Object.is(oldState, newState) is false. Thats it. If u compare array with the same array, of course Object.is will be true and there will be no rerender

[@AndrewLapteff]

I am Slavic, but I have not yet found the best tutors on SLAVIC KZbin. Thank you, Kyle, for such a clear accent!

[@VondiaLC]

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 🤩

[@BsiennKhan]

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.

[@jc13OM]

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 !

[@jasonlough6640]

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.

Example 2: use the !! to cast the value of array length to a boolean. E.g: !!array.length

[@dancarter5595]

Is the correct answer

[@moritz_p]

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. 😊

[@DavidsInferno]

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

[@decentrob8126]

Didn't see this before my comment, but yes I do this to. Or Boolean(arr.length) for readability

[@the_kreatives]

@@decentrob8126 Or we can also use ternary operator like arr.length ? : null

[@decentrob8126]

@@the_kreatives technically yes, but in this case no, since its not "either or"

[@monome9992]

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.

[@lian1238]

what about !arr.length || ? Just curious

[@amatzen]

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.

[@7iomka]

I always use !!someVariable && ()

[@codesymphony]

just use a double bang !!array.length &&

[@LinhDoan3108]

I also prefer using double exclamation marks !! for this mistake #2

[@rand0mtv660]

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.

[@nark4837]

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.

[@黃宗榮-f3i]

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.

[@cadekachelmeier7251]

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.

[@MatthewWeiler1984]

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 :)

[@juancarloscampbell5728]

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.

[@irahazda]

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😂

[@ryanpanos8862]

One of your best videos ever. I knew some of this but I am embarrassed I did not know it all. THANK YOU.

[@xGrawk]

To convert any truthy /falsy value, add !! before the variable. I.E {!!array.length && (Array length is truthy)}

[@Marujhin]

The last one gave me a headache few weeks ago. Excellent video!

[@insteresting]

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.

[@RM-xl1ed]

Dude! Mistake #1 is something that has been confusing me for forever!! Thanks for finally helping clear that up for me!

[@elhaambasheerch7058]

Mistake 3 could be a game changer for many beginner, great vid Kyle!

[@ricardomejias7957]

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 );

[@AutisticThinker]

8:00 - UseEffect clean-up functions?

[@devwithbrian1534]

You explain concepts so easily! You're the best react tutor in my opinion

[@coderlicious6565]

You have natural react skills, but you also have great "follicle karma". This incarnation you have been blessed.

[@HorstKirkPageKian]

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.

[@lukor-tech]

9:55 isn't empty string another one of the values? :)

[@beinyourguard]

really hope the course is available soon!

[@hardeepchhabra450]

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 ?

[@mohammedtahabmt3256]

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 🤩

[@eamax]

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.

[@mohammadmahdifarnia5358]

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 👍

[@pepperdayjackpac4521]

what would be another method, then?

[@ДанилФилатов-х7х]

@@pepperdayjackpac4521 Array.from, slice, and concat are all recomended to use when dealing with copying large arrays

[@kenankomah1]

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

[@somerandomniko]

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

[@VasylSunak]

😅

[@huge_letters]

Fortunately there's a lib called Immer which essentially allows you to mutate state directly.

[@arshali4635]

but react is far more used in projects also in very large scale project too

[@elgalas]

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.

[@hybs9473]

@@huge_letters serious question, why someone would like or need to mutate state directly?

[@kelechinwa-uwa5604]

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

[@Robytsu]

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.

[@adityanayak20]

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.

[@jcollins519]

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

[@aryangupta8756]

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.

[@tobafett2873]

bang bang

[@havokgames8297]

I use "!!" but it's slightly less readable for devs who haven't seen it before. "!== 0" is more clear what your intent was.

[@HorstKirkPageKian]

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?

[@LewisMoten]

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.

[@Harduex]

One of the best teachers for js!

[@shayanfaghihi]

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

[@paxdriver]

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

[@knuseski]

And how can I get the real value of the array in onClick method?

[@luizalbertolausdarosa6819]

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?

[@kimayapanash8998]

The print(number) function also works if we dont write retun in the function body So, why do we write return?

[@piyushaggarwal5207]

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"

[@hilkiahlavinier]

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 ?

[@DisturbedNeo]

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.

[@lioraharon98]

About the first mistake. If i need to pass the argument to the function i call the function (without Prentice) and bind and then i pass argument to the function without invoke this approach is good?

[@amritanshusinha7388]

binding does the same thing as wrapping the function call in another function....so you can either do it explicitly as told in the video, or use bind function on the handler and pass the value there (which does the same thing implicitly in the end)

[@lioraharon98]

@amritanshu sinha thanks. Because kylie didnt mentioned the bind method So i was thinking that is not a good approch

[@AmandeepSingh-sx9ke]

Thank you Kyle for these informative videos

[@arunsp767]

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.

[@JulioDx3480]

Thank you, this video is really helpful!

[@shivamsingh7219]

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

[@appuser]

That last example 😘👌 great example!

[@isaacopeyemirobert7868]

Very Insightful video!

[@limitlessmaster659]

What about print.bind(param)

[@Montagious]

I agree with these mistakes, I used to do them and I learned them through the hard way. Thanks kyle for bringing this up.

[@arkadiykotlyarov921]

Is it ok to approach like this when dealing with && : !!array.length && ? So we just add ! ! operators to convert in to the same boolean and it is more universal to use. Works in any cases when it can become falsy

[@orwellmushaikwa2591]

That's actually an idea to try and I think theoretically it should work since !!array.length actually turns this into a Boolean check rather than a falsey check. Since !0 becomes true and !!0 becomes false.

[@abdullaahmad5503]

I actually do it all the time. Looks cool too.

[@monome9992]

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.

[@arkadiykotlyarov921]

@@monome9992 I think that approach is more universal. I mean sometimes it is not about array at all. We can render something according to presentation of a field in an object. For example, !!animal.tail && (....). It could bу undefined, null, empty string, whatever, but it works fine at any case, this is universal i think. And with arrays as well

[@arshali4635]

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??

[@pieter5466]

7:32 THIS is a critical point: the SCOPE of data

[@prathamskanchan6289]

What will be the difference if instead of `function` keyword i use a "arrow function", For the same e.g?

[@lian1238]

They will be the same unless you use the keyword “this”

[@Shad0wB0X3r]

Thanks for mentioning point 1/2 i might need to revisit my latest project and adjust some code after watching this lol

[@bruce_k3lly]

Hey Kyle can you please please make a video on making an extension for manipulating any browser with JSON version 3

[@mew6085]

Third mistake is my favorite 🎉 Thx a lot

[@anasssanba]

instead of doing this ()=> print(number) u can do this print.bind(null,number) since bind return a new function it will work !

[@ridl27]

as always learned smth new. ty!

[@DevRel1]

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. 🙄

[@thaisonnguyen8165]

Mistake #1 I can using print.bind(null, number) to an alternative way like create a callback.

[@headcode]

10:00 You can just put a double bang operator on it ‘!!array.length’ and it’ll force it to evaluate as ‘false’ rather than 0 or ‘true’ rather than a number.

[@michaelrose3791]

Was so hyped for the course but the React specific one he mentions isn't out yet 😢

[@bikidas5473]

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)

[@ДанилФилатов-х7х]

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

[@jaibunnisamohammad9988]

how to work with react on mamp?

[@Innengelaender]

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 )}

[@SlickStatus]

Great explanation 👍😊👌👌

[@shivshankarprasad3427]

Thanks kyle very helpful

[@SarathChandranPR-bg1qh]

can you do a video about micro frontend services using react js

[@gwnima1]

Hi. Very good channel. Could you may also make content for angular and ionic?

[@huge_letters]

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]

Can you give example please?

[@abhishekpratap05]

​@@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()

[@LyricsFred]

Maybe im missing something here. But why not just use array.length > 0?

[@wdsenjoyer9960]

Perfect timing!

[@GreenZapperZ]

Great videos, thanks :)

[@gg.cip0t]

what should be the thought process while leaening new tech?? Like i started react recently... i am having little difficulty to undrrstand props.. but people say that is too easy,,, i feel like to quitttt,,, godddd,,,,, Give me some tipsss plzz, i feel like I'm the dumbest personnnn

[@曉忻]

Just keep sticking with it. Try to watch more tutorials and play it by yourself. You should get your hands dirty to accomplish your goal!

[@gg.cip0t]

@@曉忻 yesss, i will do my bestttt!!!!! thank you

[@PhaaxGames]

One tip would be to use GPT as your programming companion. Give it the code, ask it about the things you don't understand, and it'll explain it for you. :)

[@codesymphony]

only learn what you need to

[@gg.cip0t]

@@PhaaxGames ok i will try that.....

[@steviewonder580]

Kyle's videos are basically an ad for all his other videos lol

[@codedjango]

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) ??

[@Abdulrahmaneid-sp6qy]

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

[@Kay_Drechsler]

Very well explained. The last example is something I'll need to keep in mind to not run into it again. 😊

[@ahmadshbeeb]

thanks man you're a legend.

[@theisoj]

Thanks Kyle as always 👍

[@mehrdara6545]

It would be great if you also do react native videos

[@KlethonioFerreira]

Why people don't talk about bind()?

[@rodrigolaporte274]

Excellent!!!

[@whaisonw2865]

There is actually a third value that doesn't get rendered. It's an empty Array [].

[@vladimirvalko1108]

!!value && is fine too 👌🏻

[@patrykorowski4141]

Thanks! 😀

[@vakhtangnodadze4802]

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!

[@honecode2120]

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

[@alexanderkomanov4151]

Thanks a lot!

[@babakamaal8999]

Thanks man