3 Beginner React Mistakes That Can Ruin Your App

I have been teaching React for years and have seen countless beginner React mistakes, but there are 3 mistakes that stand far above the rest that I see nearly every developer make (even more experienced developers). In this video I go over what those 3 mistakes are as well as how to avoid them so you can become a master of React.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - Mistake #1
08:12 - Mistake #2
12:02 - Mistake #3

#ReactJSMistakes #WDS #ReactJS

[LePhenixGD]

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

[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!

[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 🤩

[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😂

[AndrewLapteff]

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

[DavidsInferno]

For the second mistake, instead of writting:
arr.length !==0 && <div></div>

You can add double exclamation points before the arr.length to cast is as bool, which would look like this:
!!arr.length && <div></div>

Keeps the code nice, clean and easy to read. I use this often for empty string and empty arrays

[scvytwm]

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.

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

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

[jasonlough]

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.

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

[jcOM]

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 !

[MatthewWeiler]

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

[coderlicious]

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

[juancarloscampbell]

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.

[ryanpanos]

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

[elhaambasheerch]

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

[cadekachelmeier]

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.

[mohammedtahabmt]

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 🤩

[devwithbrian]

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