Are You Making This React State Mistake?

React state is complex enough to understand how it works, but it is even harder to write good state code in React. I oftentimes see developers using global state for nearly everything in React and that leads to a ton of problems. In this video I talk about how local state is almost always better to use and how you can spot bad state practices.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:32 - Simple Example
02:34 - Form Example
07:00 - Handling Shared State

#React #WDS #ReactState

[wassap]

Honestly as someone who's been a react developer for the past few years, I think this short video is the key to becoming a more adept react developer, how to deal with its main flaws, and in general sums up the whole - anti redux (or at least, redux store reduction) movement.

Good job!

[Italiafani]

In the Form example, it is pointless to track the input refs, since the input values are only needed at the time of submit. You can just use `new FormData(event.target)` inside the submit handler.

If you need a normal object rather than a FormData instance, you can use `Object.fromEntries(new

Just make sure to have the desired `name` attributes on the inputs as they are used to access the form fields inside the FormData object.

[travelJS]

Any reason we are using refs by which it is uncontrolled component, react recommends to use controlled component

[yodahunter]

5:03
we can also use
Const formData = new FormData(e.target);
const inputObj = Object.entriesFrom(formData)

[prashantgupta]

I think the main challenge is to decide whether in future we would require any state or sibling component who might need the data to be passed! Scalability trade off

[pedromartindelcampogonzale]

Great video as always :D

For the Form example (the second one) one thing I usually do is to create a ref for the whole form and then on submit I wrap the form in a FormData object and convert to json like this: Object.fromEntries(new FormData(formRef.current))

[appuser]

Really helpful tip for me, I thought it would be more obvious than it was.

I'd love for you to tackle performance in react apps (e.g. via splitting, text compression) as there are not many clear examples of how to do this or why you might be having difficulty, e.g. with providers wrapping the meat of your app and force everything to be bundled/loaded together etc.

[frankthedsigner]

OMG super helpful! I try to keep most of my states local and mainly try to use context when wanting to access certain functions or data. I would love to see more iterations on using context for React. I've been struggling to get it to work on some components but I believe it's all to do with scope which is something I'm still trying to wrap my head around. Again, great video!

[teknologene]

Right on time! I just realized this a couple of days ago and actually started refactoring my existing project. However I wasn't sure if that was correct. This video helped me answer that question. <3

[robwatson]

Not a fan of your clickbait video titles, but watched it anyway because your content is usually good!

useRef is new to me and now I understand what it can be used for, so thank for that! Really useful guide on a few ways to handle state in an app.

I'd be interested to hear more about why we put State as close as possible to our Components. To me, this seems counter-intuitive because as a glance you can't see what data any component is going to need, you'd have to look at each component to see their own managed state.

[marcosc]

The last part is the reason why I love to use Redux so much, don't need much planing on "what should it wrap?", the state will be there, if you need to read just map it, if you need to change it just dispatch, only calling it where it is really needed. I like context too, but it's too many moving pieces and places to screw up compared to a highly structured and organized feature like Redux.

[randmtv]

Regarding forms, please just use react-hook-form with a validation library like yup/zod. Your developer experience while building forms will improve 10x with this combo. If you really only have a register and login form, then it might be overkill, but I cannot remember any app that I've used that had only these two forms and not any other form in the entire app.

I do not usually advocate to immediately pull a 3rd party library into your app for every little thing, but building forms is hard (state, validation, submit, isSubmitting state etc.) and react-hook-form + zod/yup make that experience way way better. That combo is also wonderful if you use Typescript.

[LeonC]

OMG you just helped me fix something I’ve been dealing with FOR DAYS

[Louisi]

Removing the 'onChange' and 'value' props is a terrible idea; react should always be handing the state of a form, as there can be situations where react decides to completely re-render a form component and it will delete the content. This is more appropriate on larger forms, but keeping to good practice is always better.

Plus, if you want need to use that state later on you need re-write how your form works. This can be for things like saving an incomplete form to localStorage/sessionStorage, live validation, conditional logic and live formatting.

React re-rendering your form, when you type, isn't a problem (especially on smaller forms); it just makes sense to ensure that your form context is kept in React's state, rather than the browser's.

[SupremelyAverage]

The beginning config is valid if you are keeping the counter in the popper or a dropdown which rerenders everytime it opens.

[pinakadhara]

For anyone interested to work with forms, I would highly recommend react-hook-forms package

[mr.gandalfgrey]

When you turn on subtitles in Kyle's videos it's basically a single sentence with no full stop. :D

[JohnCostanzo]

For your form example it would be nice to show how you would reset the form after your submit completed successfully

[sohailahmad]

Hi Kyle, I don't believe that this content is free for us. You deserve 10M subscribers Love from Pakistan.

[PaulSebastianM]

First example, Counter was a stateless component which you made stateful. It could have very well been that App needed the state, and Counter was just an interface for the user to view and update that state.