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

------------

[WebDevCody]

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

[doc]

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.

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

[unknown-user]

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-rece]

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😅

[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 ^_^

[AtmaniChouaib]

thank you you made it really clear and simple

[alexstrasza]

thank you, you're very good at explaining

[returncode]

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!

[spiridonov]

awesome video and really unique way of demonstrating it

[NazariyMurall]

Really good job, short and extremely helpful 💪💪💪

[yasuke]

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

[dlmntiu]

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

[emmanuellmiqueletti]

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

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

[doc]

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.

[matthewrossee]

17:02 state setters are fully synchronous

[AsakuraAvan]

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