3 Beginner React Mistakes That Can Ruin Your App

FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
Full React Simplified Course: reactsimplified.com
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:
FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
Full React Simplified Course: reactsimplified.com
Passing Functions As Variables Video: • Every JavaScript Devel...
Passing Functions As Variables Article: blog.webdevsimplified.com/202...
Short Circuiting Video: • If You Don’t Understan...
Short Circuiting Article: blog.webdevsimplified.com/201...
Reference Vs Value Video: • Reference Vs Value In ...
Reference Vs Value Article: blog.webdevsimplified.com/202...
useState Video: • Learn useState In 15 M...
useState Article: blog.webdevsimplified.com/202...
StrictMode Video: • This One Line Of Code ...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

[@mahesh.muttinti]

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!

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

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

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

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

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

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

[@beinyourguard]

really hope the course is available soon!

[@ryanpanos8862]

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

[@user-sc6vy4tw6m]

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.

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

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

[@AndrewLapteff]

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

[@Marujhin]

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

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

[@michaelrose3791]

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

[@RM-xl1ed]

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

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

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

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

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

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

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

[@elhaambasheerch7058]

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

[@devwithbrian1534]

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

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

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

[@JulioDx3480]

Thank you, this video is really helpful!

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

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

[@Shad0wB0X3r]

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

[@kimayapanash8998]

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

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

[@user-in4ti5lj4k]

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

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

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

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

[@ridl27]

as always learned smth new. ty!

[@coderlicious6565]

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

[@gwnima1]

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

[@shivshankarprasad3427]

Thanks kyle very helpful

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

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

[@Indragantiakshay]

Great . recently I stopped using short-circuit using ternary instead

[@mew6085]

Third mistake is my favorite 🎉 Thx a lot

[@theisoj]

Thanks Kyle as always 👍

[@appuser]

That last example 😘👌 great example!

[@isaacopeyemirobert7868]

Very Insightful video!

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

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

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

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

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

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

[@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"

[@wdsenjoyer9960]

Perfect timing!

[@Harduex]

One of the best teachers for js!

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

[@knuseski]

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

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

[@SlickStatus]

Great explanation 👍😊👌👌

[@AutisticThinker]

8:00 - UseEffect clean-up functions?

[@ahmadshbeeb]

thanks man you're a legend.

[@SarathChandranPR-bg1qh]

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

[@bruce_k3lly]

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

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

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

[@xGrawk]

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

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

[@GreenZapperZ]

Great videos, thanks :)

[@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”

[@lukor-tech]

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

[@mehrdara6545]

It would be great if you also do react native videos

[@lioraharon6352]

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)

[@lioraharon6352]

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

[@limitlessmaster659]

What about print.bind(param)

[@steviewonder580]

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

[@anasssanba]

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

[@rodrigolaporte274]

Excellent!!!

[@alexanderkomanov4151]

Thanks a lot!

[@jaibunnisamohammad9988]

how to work with react on mamp?

[@Kay_Drechsler]

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

[@patrykorowski4141]

Thanks! 😀

[@Emerald13]

I missed the early bird for the React course 😢😢

[@user-in4ti5lj4k]

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

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

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

[@abhishekpratap8784]

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

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

[@BloodyScythe666]

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"

[@pieter5466]

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

[@whaisonw2865]

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

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

[@user-mq4zz1pf8w]

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]

@@user-mq4zz1pf8w 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.....

[@vladimirvalko1108]

!!value && is fine too 👌🏻

[@deimne970]

For that reasons, I prefer to use Svelte

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

[@headcode]

These mistakes are why I appreciate TypeScript

[@KlethonioFerreira]

Why people don't talk about bind()?

[@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)

[@sundarapandim1104]

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.

[@alissonlima529]

Thanks.

[@doniaelfouly4142]

Thanks