The important things to know about React state and renders

A walkthrough on react state and when react re-renders components
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
------------
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/cod...

[@WebDevCody]

idk why I kept saying "because of how closures work". there are no closures here, just scoping. "because of how scoping works". cheers!

[@KWerder92]

phew, I was already doubting myself 😛

[@doc8527]

Frontend interview question is another trouble maker, they asked a lot of code cases (terrible object reassignment patterns and abuse variable scope) that you should never use them in code, and then ask you what happen if you use them, some ignorant devs even are pretentious about knowing those non-sense. It cause many Devs to hard memorize them. In fact, you should never know them, they will pollute your knowledge database.

[@sprioleau]

I've been writing React for a few years now and though I know how state works for the most past, you filled in some gaps for me in this single video. Well said. This was helpful! I love your videos and tune in as often as I can.

[@katadermaro]

the audio quality of this video is amazingly done, delight for my speakers! Great video. Thanks.

[@unknown-user001]

this is the explanation that I've wanted for a long time. Most of the tutorials explain how hooks work and how not to use them, but those never explain this much. Thanx.

[@alireda-re1ce]

Absolutely fantastic video which is absolutely necessary for anyone looking to get into react to watch. Understanding the concepts here really saves so much debugging time. I know because I suffered debugging these kinds of issues for so long lol😅

[@pesterenan]

That was really useful! I'm refactoring code from other people that is really full of states and variables, so this will help me decide what to keep and what to change.

[@Goyo_MGC]

Great video to remember the concepts behind React ! I've been so immersed in the framework that i was going with the 'everything needs to be a state' mindset. But when a re-render is not needed it is true that you can use generic JS which i forgot ! I might have to update my linters to allow it from time to time ^_^

[@alexstrasza4938]

thank you, you're very good at explaining

[@returncode0000]

Jesus christ, I finally understood how useState works haha thanks! Please, do an example like this with all the other standard hooks, this would be so fricken awesome. You are so talented in explaning things!

[@WebDevCody]

Thanks man I appreciate that. Yeah maybe useEffect next

[@returncode0000]

@@WebDevCody This would be awesome, thanks 😊

[@mahmoudtaleb8281]

Just wonderful!

[@randomorigins5041]

Thanks!

[@yasuke1280]

The last 5 minutes of this video was too intense for my brain. I was keeping up until then, time to save this in my watch later.😅

[@NazariyMurall]

Really good job, short and extremely helpful 💪💪💪

[@spiridonov1]

awesome video and really unique way of demonstrating it

[@AtmaniChouaib]

thank you you made it really clear and simple

[@itsmepawan]

Amazing video, subbed 🥂

[@rohil3023]

A very useful video for us beginners!

[@jonathanyngfors3905]

Great! Thanks

[@thomas-gk9jp]

Thank you so much !!

[@AsakuraAvan]

lol 'Shadow DOM', that sounds badass. React should've called it that instead of Virtual DOM

[@WebDevCody]

There is a shadow dom concept, I just confused the terms 😔 google shadow dom vs virtual dom

[@matthewrossee]

17:02 state setters are fully synchronous

[@user-dl7mn3ti9u]

Loved the tutorial man this thing is legit 100% !! althogh i wish if theres a way you can do it on computer

[@WebDevCody]

Do it on a computer? What do you mean

[@emmanuellmiqueletti7029]

I got this question for a senior dev interview. The interview wants a detailed explanation why react renders

[@kishorjanjal7454]

thanks much needed explanation

[@doc8527]

I think one of the important issue with React is that many newbies expect React works as JavaScript. It's apparently not. This is actually a common Frontend issue nowadays, many jump into the Frontend world with one framework like react, svelte, or vue and etc. without knowing the fundamental of JavaScript, even the JavaScript itself has a lot of clucky behavior, so they will make a lot of mistakes at the beginning. The worse case, they want to apply framework philosophy everywhere even back to language itself. if you have something in your code like a dependency state update as a learner, there might be something wrong in your code most likely ``` setAState(newA); // waiting A update, something happen in between, setBState(A); ``` Just a common trouble pattern I see in React, Svelte and Vue also have their own issues to deal with.

[@WebDevCody]

Solid js tries to avoid this problem by always requiring a function for getting the current value of state. But yes to truly understand these react state bugs you need to know js pretty well

[@thecutedreamkostasp.4449]

This guy is literally Broken!

[@WebDevCody]

I’ve lost my mind

[@alekxandar]

This is really usefull, Thank you

[@ihateorangecat]

This is the 1k th like for this video. 999 to 1k

[@zakarianaji9428]

thanks for the video

[@vizunaldth]

Pretty sure closures have more to do with functions “closing” over inner state with an inner function doing something with that state. Would definitely say that’s much more global state as it’ll be available on window object as scoped.

[@WebDevCody]

Yeah true bad word choice, it’s more of how scoping works, no retakes. Record once and publish 😂

[@vizunaldth]

Respect for you doing it tho!

[@Paxters_]

great video!

[@crystalcacik3346]

nice :)

[@SeibertSwirl]

Good job love ❤️

[@justine_chang39]

i love using Vue, and I think it's far superior to React, but it just doesn't have the same quality libraries like React does. Even component libraries aren't as good as the ones in React-land, the most popular 2, Vuetify and Quasar, are styled with Material UI, which is soooooooo ugly in 2022. I COULD use Tailwind, but I don't want to design all my components from scratch. Lemme know if you know any beautiful Vue 3 component libraries!

[@lindennerdhh]

I think that if you we're to make your count vanriable const, then js wouldnt hoist it anymore, but you would have to do some hacky stuff to change it. Great video! Love your didactics

[@alexanderkalchev188]

I have a question about useEffect. Why should fetch data from an API inside useEffect and not just inside the component function?

[@WebDevCody]

Because the component function will rerun over and over again

[@masiafmasiaf2204]

in your example to put the count var (min 5:18) outside the component and you can mutate it, is there a different with useRef? like a countRef.current and change it from there?

[@WebDevCody]

useRef will not tell React to re-render. But yes, you could use a ref and increment it, but you'd still need a useState somewhere to let react know it's time to render again.

[@masiafmasiaf2204]

@@WebDevCody thanks for the answer i didnt know is there has a difference on useRef, cause i had some issues using it, wanna save some var on a useRef cause i know that var is not gonna show on screen, but for some reason the value on the useRef change, when a use the debugger it just go to that line of useRef and the value change just like that, i end up doing the other way that a forgot was a old sprint that i have had and there was no answer on stack overflow or google. it i encounter the same problem i will sure let you know.

[@garrysyt8461]

Amazing to know what happens under the hood

[@smrpkrl]

4:33

[@okandikkulak8057]

13:54

[@coldym]

Did you mean to useMemo in 14:31 ?

[@WebDevCody]

Yes, typed the wrong thing. React.memo is for components