3 Beginner React Mistakes That Can Ruin Your App

Подписаться 1,6 млн

Просмотров 102 тыс.

50% 1

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

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 214

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

Год назад

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😂

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

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

@beinyourguard Год назад

really hope the course is available soon!

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

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

@Marujhin Год назад

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

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

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

@AndrewLapteff Год назад

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

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

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

@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 10 месяцев назад

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.

@RM-xl1ed Год назад

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

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

@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

@elhaambasheerch7058 Год назад

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

@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

@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

@JulioDx3480 Год назад

Thank you, this video is really helpful!

@devwithbrian1534 7 месяцев назад

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

@ridl27 Год назад

as always learned smth new. ty!

@insteresting 6 месяцев назад

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.

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

@isaacopeyemirobert7868 3 месяца назад

Very Insightful video!

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

@michaelrose3791 Год назад

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

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

@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

@gwnima1 Год назад

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

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

@shivshankarprasad3427 Год назад

Thanks kyle very helpful

@coderlicious6565 8 месяцев назад

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

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

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

@GreenZapperZ Год назад

Great videos, thanks :)

@Shad0wB0X3r Год назад

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

@appuser Год назад

That last example 😘👌 great example!

@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

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

@Harduex Год назад

One of the best teachers for js!

@LewisMoten 3 месяца назад

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.

@SlickStatus Год назад

Great explanation 👍😊👌👌

@wdsenjoyer9960 Год назад

Perfect timing!

@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

@mew6085 Год назад

Third mistake is my favorite 🎉 Thx a lot

@theisoj Год назад

Thanks Kyle as always 👍

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

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

@rodrigolaporte274 Год назад

Excellent!!!

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

@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

@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

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

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

@alexanderkomanov4151 Год назад

Thanks a lot!

@mehrdara6545 Год назад

It would be great if you also do react native videos

@ahmadshbeeb Год назад

thanks man you're a legend.

@bruce_k3lly Год назад

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

@knuseski Год назад

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

@SarathChandranPR-bg1qh Год назад

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

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

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

@patrykorowski4141 Год назад

Thanks! 😀

@AutisticThinker Год назад

8:00 - UseEffect clean-up functions?

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

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

@babakamaal8999 20 дней назад

Thanks man

@lukor-tech Год назад

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

@anasssanba Год назад

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

@xGrawk Год назад

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

@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

@steviewonder580 Год назад

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

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

@limitlessmaster659 Год назад

What about print.bind(param)

@Kay_Drechsler Год назад

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

@whaisonw2865 Год назад

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

@vladimirvalko1108 Год назад

!!value && is fine too 👌🏻

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

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

@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

@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

@pieter5466 Год назад

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

@doniaelfouly4142 Год назад

Thanks

@jaibunnisamohammad9988 Год назад

how to work with react on mamp?

@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

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

@alissonlima529 Год назад

Thanks.

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