Question: How to properly do validations/maintain small ui state?

[SpencerCDixon]

Sorry if this question has already been asked and answered! If so, would love a link to answer.

My team and I are a little confused as to how to best do things like form validations or maintain small ui state. Seems like overkill to create actions and update the store for something as simple as a form validation. Is it acceptable to use setState for small ui based state of components? It seems like that goes against the whole idea of Redux which is why we're reluctant to do something like that.

Seemed like there was some discussion here about what the future of state management might look like for React but I'd love to know the "Reduxy" way of doing it.

[gaearon]

Seems like overkill to create actions and update the store for something as simple as a form validation.

It depends. Usually as app grows forms want to know about other forms, and you'll be glad this state is available. See also redux-form.

Is it acceptable to use setState for small ui based state of components?

It's fine if the state is truly local. There is no ready rule of thumb here. If you're sure this state won't be needed elsewhere, make it part of React state; otherwise, make it part of Redux state.

For example, a form, even if it's state is not used elsewhere, actually corresponds to a ton of state if you want to make it user friendly. You want to track dirty and pristine fields and whether submit was attempted to know whether to show validation errors; you want to track validation errors themselves as they occur and come back to server; etc. It becomes a mess so I'd suggest using Redux state + redux-form for this.

On the other hand, if it's a simple form without validation which is not central to app's purpose (e.g. "Send Feedback" form) using React component state is just fine.

[SpencerCDixon]

Awesome. Thanks @gaearon for the quick response! Definitely have a better idea of how to approach this now.

[idavollen]

@SpencerCDixon I had the same demand for my project, and finally I've made a simpler version of react-form-ex with support of form validation, idavollen@github