Top 6 React Hook Mistakes Beginners Make

FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
📚 Materials/References:
FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
Reference vs Value Video: • Reference Vs Value In ...
Reference vs Value Article: blog.webdevsimplified.com/202...
🌎 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:39 - Using state when you don’t need it
02:57 - Not using the function version of useState
06:44 - State does not update immediately
08:25 - Unnecessary useEffects
12:40 - Referential equality mistakes
16:55 - Not aborting fetch requests
#WebDevelopment #WDS #JavaScript

[@IceMetalPunk]

React's own docs explicitly recommend using state-controlled inputs over refs whenever possible. It refers to the ref method as "quick and dirty" because it lets the DOM handle tracking the value instead of React, which can sometimes cause unexpected behavior when React renders its virtual DOM. So... yeah. I think for forms, especially large ones, it's better to keep track of values in a single state object with key-value pairs. That does mean it'll re-render whenever a value changes, but since React only manipulates the DOM for the one input that's changed, it's not a big deal; and it allows React to have more control over, and more understanding of, the inputs, for optimizations. The main issue with using local variables instead of useEffect for composite values is future-proofing: when you add more state to the component, those variables will be re-evaluated on every re-render even if they don't need to be. In such cases, I think useMemo is the optimal solution; in fact, it's why useMemo exists! (And I believe recomputing a memoized variable doesn't trigger a re-render the way setting state does, though I couldn't find anything definitive about that.) But you are right that in some cases, you don't need to listen for changes at all, since you can just use the new value at the same time as you're setting it on the state.

[@CraigClayton-bk3ze]

I think useRef should be used for forms, you don't want component re-rendering on every key stroke just for a form, but if you was using a search/filter input where you are filtering on the users key stroke then you would need to useState and make it a controlled component.

[@chonmon]

@@CraigClayton-bk3ze It only re-rendered the input DOM tho? Instead of the whole form if I understand it correctly. I don't think it's a big deal.

[@ccrsxx]

@@chonmon yes, not to mention you'll always want to have some kinda validation on the form.

[@CraigClayton-bk3ze]

@@chonmon it's not a big deal but if you can avoid any components from rerendering no matter how small is just a bonus. Also it's less syntax in that component, which looks nicer

[@thienhuynh7962]

@@CraigClayton-bk3ze then you can opt for other event like submit or blur to minimize re-render. Although useRef is a fine solution since there’s no re-render, using it with forms that have many fields or require validation will give you a hard time managing these fields’ value and their behaviors

[@jennifermagpantay7933]

Golden tips! Love content like that with different case scenarios and clear explanation! I have learnt so much! Thanks for sharing!

[@runonce]

For handling form why not simply grab the input values from the onSubmit event? No need for state or refs.

[@twothreeoneoneseventwoonefour5]

Yes that is what I usually do. const formData = new FormData(e.currentTarget) and then const [username, password] = [formData.get("username").toString(), formData.get("password").toString()]; looks cleaner to me than using refs or state there well I still use state for input validation though

[@deadlock107]

It was worth to watch, I learned pretty valuable things especially the fetch abort, it's golden, thank you!

[@bowenp01]

Fantastic! I’m just learning react and you’ve explained the funky behaviour I’ve been getting with useState perfectly. Thanks for taking the time to make these videos 😊

[@rubyvi7308]

Why are you excited to watch while the other crying are u happy

[@belkocik]

amazing video for react beginners. :) Thank you. Looking forward for more react mistakes that beginners and more advanced devs make

[@kuken72]

This was really straight to the point and very helpful. Thank you Kyle! :)

[@nsontung]

one of the best React tips I ever learn on KZbin. Thank you so much

[@adnanhaider9302]

The number of useEffect gotchas and permutations are just never ending. I have such a love hate relationship with this hook.

[@coderyan]

You and me both

[@Toomda]

This was soo helpful. I had a beginner project, just for fun and I almost made all of the mistakes. I just fixed my code, and it looks much better now. Thank you

[@vaibhavsri.]

Really useful one. Please keep on making great informative videos like this. You're the best!

[@jackwin9641]

well this is what I am looking for ages. THANKS KYLE, you made my day, now I can revise my old code at a higher level

[@pedrocruz8164]

some of the senior developers in a company I worked for used to not approve my PRs asking for me to not use useRef to the store any state in react component. It is nice to see someone explaining why not every state needs to be rerendering the component on every data update.

[@CarlosRenanFonsecadaRocha]

A good thing to point out about the first mistake is that a good UX informs the user if the field has any errors while they are typing; in this case, this is not possible. Better to stick with states, but it is a nice thing to know.

[@asmmisfar]

Hey Kyle, This is really very helpful for me. Tomorrow I have a task to complete in my office. I was worried about how to do that. but, this video gave me a clear idea about that. Thanks a lot. Keep going, bro. Loves from Sri Lanka ❤

[@WorkThrowaway]

This was a great video and helped me solve an issue i had with my hook, namely having multiple states update with an action needed once they were both updated. it took a while to wrap my brain around it, but this video really helped give me the vision. love your videos and that you go super in depth (in the longer ones). probably the best coding tutorials on youtube. if i ever get my web dev dream job, i will be getting you a few coffees/beers.

[@saheedsimisaye8978]

Most valuable React tips I have learnt regarding some bad code practices I have been applying in React. Thanks for this very comprehensive video with lots of valuable information covered in just over 20mins.

[@michalbilinski4168]

Hands down, what a perfect rhetoric - watched it with great pleasure - thanks

[@workwithwegs4541]

Hey Kyle! Thanks a lot for your awesome videos! Have you tackled about using normal function and arrow function in react js? You seem to use both but I'm not sure what your criteria is. Hope you make a video about it! Thanks!!

[@kamelnazar-instructionalde9740]

This worked incredibly well! I can finally play it thanks

[@User36282]

You really have a talent for education my man. Whenever I'm not understanding something in web dev now I just search for web dev simplified and boom there's always a video on it. Thank you! These were really good tips for those of us just getting into front end :)

[@mariumbegum7325]

Really good video, very informative and explaining in a clear way.

[@darkmift]

Excellent explanation on state setter usage

[@DarkFlarePrince]

This is the single most useful video I've seen since I started React coding

[@ori-kapkap]

It's very helpful for React beginner like me! Thank you for your videos :)

[@Caspitein]

Interesting video Kyle! I noticed I do make a few of these mistakes myself. I think the problem is that us developers can be a bit "lazy" learning new frameworks. I understand how the useState and useEffect hooks work and I never took the time to learn about useRef and useMemo for example.

[@coderyan]

totally!

[@Spyrie]

You'll use it once you handle big data and use expensive functions that can block the main thread

[@d.ilnicki]

Well I this case the "lazy" one is the video author. Recommending using refs over state on 1.34M subscribers is a crime.

[@paulbird2772]

Very clear video, I just switched to Typescript for last major project, took a bit of effort initially but rewards are great, the build step catches a good few errors very early. I think not using TS could be added to your list. I expect many that haven't given it sufficient time will disagree.

[@dannyj7262]

I spent hours on my degree final project sorting out errors that js didn't pick up until I tried to run a piece of code with an error in. Switched to TS and it's a million times better and Id also say I've learnt a lot more too

[@habibiSD]

Well done sir, excellent video. Thank you for your hard work.

[@loicrutabana1884]

Amazing! You make great content. I especially like your youtube shorts

[@movsesaghabekyan9794]

It was amazing man. Thanks a lot🔥🔥

[@mingxindong3150]

that just makes so much sense!!!! thank you for bring the good code

You just prevented some lay offs, great job.

[@noelfrancisco5778]

great tutorial, I learned something new today. Thanks :)

[@user-ol6tq5hw7s]

Phenomenal video Kyle, I like this video of yours the most where you show the best practice and where you point out mistakes that are often repeated, so I can't wait for another similar video and keep it up. Big greetings to Serbia! :)

[@marwenlabidi1038]

thank you for this great quality content

[@KathidFX]

It does work as the same as before in case of email and password, but we use usestate , value and onchange to create Controlled components. Uncontrolled components with refs are fine if your form is incredibly simple regarding UI feedback. However, controlled input fields are the way to go if you need more features in your forms.

[@developer_hadi]

Thank you so much, as a beginner you helped me a lot

[@louis-emmanuelisnardon8308]

Great video ! Well explained ! Thank you, I'm modifying my code right now...

[@sergiogusto]

00:45 tag stores fields value

[@taulantus]

For the first case you don’t need state or refs the onSubmit function has access to all the input fields via the event parameter

[@mehmetacikgoz9814]

Using refs instead of state does not seem right in this scenario. First of all, such a render does not create any overhead since behind the scenes react will do equivalent of what you have done with refs. Besides, these code will probably be improved with validators etc. which will result going back to state version

[@rvft]

Sus lan

[@neutralface]

You're correct. React has always preferred controlled components (react handles input value) over uncontrolled components (DOM handles input value). This is second time I see Kyle making this counter-argument to use refs, which I think is incorrect.

[@ACMonemanband]

This is really debatable, as the scenario Kyle mentioned is that, all the inputs are only used upon form submission. For experienced React developers, we have always been using controlled components and get really used to it, so we are very unlikely to use Kyle's uncontrolled ways in any circumstance.

[@neutralface]

@@ACMonemanband True. Refs are mentioned in the "Escape hatches" section in the new react docs, which for me intuitively tells that refs are used as secondary option when first option of controlled components doesn't work.

[@rand0mtv660]

​@@ACMonemanband These days I usually just use react-hook-form and don't worry if something is controlled or uncontrolled in a most forms. The fact is that for more complex forms that might compute a lot of stuff, uncontrolled form inputs are better because they won't re-render the whole form on each input change. If you need to do any active validation, you'll probably have to go for controlled forms because you'll have to react to form changes all the time and not just on submit, but in cases where you just need to validate on submit, you probably want to go for uncontrolled inputs. Only reason I dislike his input ref example is because you'll rarely only work with two field forms in the real world and you'll most likely have multiple (more complex) forms in your app. At that point, just reach for something like react-hook-form and never worry about building forms in React.

[@mikeonthebox]

I'm thankful I found Svelte and don't have to deal with this complexity. Svelte makes everything so much intuitive. Like yes, there are still some special cases and implementations where you require some special syntax, but for the most part it's just writing regular JS without having to think what wrapper you need.

[@mikejuli8243]

Man, using setCount( (count)=>{count + 1} ), it's the greatest way how to handle this real react problem! That's was extremely beneficial for me !!!!! Thank you!

[@evrentank6402]

Thanks a lot. These are very important and useful knowledges.

[@nigeryanes1987]

Excellent video, thank you very much.😊

[@Infinizhen]

Great video. I don't know what more can i say. Cheers!

[@igorkushnir4966]

last one just perfect! thanks!

[@crim-son]

This is really helpful ❤️

[@ethanmcrae]

I really appreciate this video!! 🙌

[@MaherOmri]

Amazing explanation! Many thanks

[@wisdomelue]

best explanation of useMemo out here👏🏽

[@carlosricardoziegler2650]

Good tips , thanks for sharing

[@joemathan6101]

You would still control re-renders by using denounce on top of state. So, there won't be a need for ref in this case. As the react doc itself suggests us to go with controlled components over uncontrolled components Useful video thank you

[@joseff5998]

I really appreciate your explanations. Top-notch!.

[@shivshankarshejwal6728]

Nice tip last one.Thanks

[@mangman]

Great video! useRef seems neat, but you do lose the ability to have real time validation, as that logic would be placed in the onSubmit function.

[@nirmesh44]

best tips ever. i also was not using functional way of setting state

[@youssefhossam9077]

that was helpful thank you

[@yashpreetbathla4653]

Great video dude thanks :)

[@vorkosiganhs]

Amazing video, thx a lot!

[@appuser]

This video rocked my world. Had quite a REACTion to it.

[@raziechavoshi5994]

super informative and helpful

[@singhsankar]

very simple and very useful!

[@gilsonconceicao5201]

Thanks. I didn't knew these.

[@NathanBudd]

That last useFetch insight is very helpful! I think it could be even more so if combined with some king of debounce? So the fetch only runs after say 0.5s?

[@mystic7207]

Awesome explanation ❤

[@maximpolsky2683]

Many thanks! Good luck with your channel! Greetings from Kyiv!))

[@tomasburian6550]

You are my hero. Btw, I think that we all learned the hard way that adding the useState count twice in a row would still do it just once :P

[@charlesvicencio2461]

Thank you Kyle!

[@AR7editing]

15:45 in that case instead of useMemo we can directly use in the dependency array person.name and person.age and it will not cause rendering when you change the dark mode checkbox

[@ode2877]

Usefull for beginner like me, thanks 🎉

[@RiteshNEVERUNIFORM]

In the last one we can also use debounce custom hook. That way we can use it everywhere

[@MrQVeeBoo]

Very good, on point, thx

[@chanhaoen62]

Thanks for all the react tips! Really helped me a lot :) will you ever put out a video of you playing guitar? haha

[@lukas.webdev]

I'm pretty sure, that there is already a part in one of his videos, where he plays a solo... But I can't remember how it was called... 😄

[@user-cp4wf4xy1g]

Simple and brilliant

[@mr.gandalfgrey2428]

Soo good to see that there's finally more than just a guitar in your room :D just kidding, awesome video as always!

[@sam-u-el]

thank you sir what was informative

[@darkthrongrising5470]

I've been tinkering with React here and there for about five years, this is the first I'm hearing of a functional version of useState.

[@FrancisBourgouin]

Pretty great tips for React! However, I have a couple of disagreements with your mistakes. Maybe I'm wrong, but I'd be curious to discuss with others here: 1- useRef vs useState for forms: Using state to update and rerender form inputs is what a controlled form is. If you use useRef you can't apply conditions or mutations on the inputs, you'll trust your DOM into having the right information instead of your state. So even if it works, if you need a form, use a state, not a ref. 2- prev vs count: I disagree with using prev everywhere, especially with the example that you're using. When I use count, I know what count is, all the time. if I use prev, I need to look through my entire code between the state and my function to 'count' how many times did I call setCount. Also, you should do all the work, then call a setState, not do a setState party in my opinion. Continue the great work!

[@saikatpaul6576]

Learn the basics dude.. What he did with the count is exactly how you should do it

[@FrancisBourgouin]

@@saikatpaul6576 Very productive comment there, care to elaborate on why I'm wrong ?

[@saikatpaul6576]

@@FrancisBourgouin you might need to setState on numerous conditions.. How are you going to do that? The way you are talking about is not possible because that way you can use setState only once. Say it's an array of object. And you may want to manipulate it on different conditions

[@FrancisBourgouin]

@@saikatpaul6576 I would disagree with what you just said, there's always a easy way to do it with one setState. I'd be curious to see what you would find impossible to do, I'll show you how I would write it.

[@saikatpaul6576]

@@FrancisBourgouin it's not impossible.. But that's the right method..

[@MJstart]

Thanks for video Kyle

[@g_sami__newn8728]

Useful video❤️

[@sagarmishra6746]

I even express with words how much this video has helped me. I got answers to lot of my questions. Thanks Kyle💥

[@eiatot6455]

{} === {} false is the correct result for more than one reason but what I want to stress is that {} is NOT an object, it is the LITERAL CONSTRUCTOR hense don't tide the symbols to what they actually are, the constructors return objects. Excellent video ty.

[@jesuscabrita5815]

that useMemo trick... was lovely

[@AllAboutDev]

Last tip was really important ❤

[@anhqui19822011]

Thank you for the great video! Regarding the choice between useRef and useState for form submission, I believe we should use useState instead of useRef. This is because we typically need to reset the input value to empty after submission. For input filtering, updating the state as the keystrokes change is necessary to display the latest value in the UI.

[@sandhilt]

Thank you for share.

[@beinghappy3924]

You really deserve thumbs up from me. Good Job. 👍

[@jessejoseph2643]

Thanks Kyle. Funny how I'm an advanced react developer and I make a couple of mistakes you pointed out.

[@radhouze2554]

Subbed for that beautiful Jackson guitar

[@jeromealtariba7339]

excellent ! Big thanks

[@mustaphasalehipourenglish7387]

was great like always

[@shashi20008]

Well, like others in the comments have pointed out, useRef over useState shouldn’t be taken as a general rule. Aamof, for the example discussed in the video, it might be best to leave the inputs as uncontrolled components if their values are not explicitly used. The FormData API can be conveniently used in the submit event handler to get access to actual values at time of submit. That said in non trivial examples it’d typically not be the case as you’d want client side error handling and what not. Just use useState then. Also regarding the last suggestion in the video, the behaviour described for AbortController is not accurate. Aborting a request using AbortController doesn’t prevent the promise returned from fetch() call from settling. The promise will actually be rejected with DOMException having code ‘AbortError’. While cancelling previous requests in this manner you’d want to explicitly ignore these errors (and not display them to users as error). An alternate method I have used to solve the same problem is to keep track of start time of the current request (via closure), and start time of most recent finished request (via ref). When a response arrives, check it’s start time against most recently finished request’s start time, if it’s not later just ignore the response. Sounds complicated but can easily be wrapped in a small lib function.

[@achyutrastogi8080]

Is there any inherent benifit to using your mehod over useMemo the way Kyle has shown? The only downside I see is having to manually ignore code 'AbortError' DOMExceptions so that they don't clutter your health tracking tools.

[@hazemalabiad]

You are AMAZING ... Kyle 💐

[@elmalleable]

if its a simple form then you can just take the values from the form event when you submit and you dont really need to keep state provided you have a vary basic use case for the form, complex validations and connected models then you'll probably go back to using state

[@it9hektar]

good explanation !!!, my problem can be solved, thank you very much..

[@khallikan]

Damn what a great video. Excellent at explaining

[@backupmemories897]

hmm I don't have this problem in angular xD but i'm trying to learn react this month. this is a good help

[@sheriffawzy2998]

Good work Kyle 😉

[@komalmadamwar710]

this is super helpful