Top 6 React Hook Mistakes Beginners Make

📚 Materials/References:

🌎 Find Me Here:

⏱️ 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.

[jennifermagpantay]

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

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

[jackwin]

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

[bowenp]

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 😊

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

[adnanhaider]

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

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

[belkocik]

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

[kuken]

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

[deadlock]

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

[runonce]

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

[nsontung]

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

[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

[saheedsimisaye]

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.

[paulbird]

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.

[pedrocruz]

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.

[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

[letsoverengineer]

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

[vaibhavsri.]

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