I find that the biggest issue with forms and react is attempting to use lifecycle methods and local state to manage the behavior of the controls: at work, I’ve done a bunch of refactorings to replace local state and lifecycle methods with redux and logic in the render method of the parent components, and this has always led to simpler components and has fixed a lot of bugs caused by inconsistencies between props and state.

I think this is because you are using both state and props to manage the values of fields. I generally tend to use only props, with an onChange handler passed in from the parent component. This way, I can always have an up to date mapping of field names to values in the parent component, while simplifying state management in the child.

This is exactly what I’m saying: use only props and handle state elsewhere.

You made not need redux! Found lot's of projects where they plug redux an turns the project a completly mess. (connected components everywhere), actions to manage local component ui state..

I’ve heard people are pretty happy with Formik.

https://jaredpalmer.com/formik/

You're right Dan, this is a great framework, but the code complexity behind it is insane. Of course a lot of that complexity is due to HTML/browser, we cannot ignore that.

However, part of that complexity is the fault of React. The choice of HOC vs. Component... two ways to do the same thing. There is also FastForm vs. Form. As we move on over time, now we have hooks being added as well. The mental complexity just to put a simple input on a page is overwhelming.

I think what I'm looking for is React to take some ownership and provide guidance out of the box for these core browser features under the React umbrella.

> I think what I'm looking for is React to take some ownership and provide guidance out of the box for these core browser features under the React umbrella.

So we need React on Rails? An opinionated collection of libraries that work on top on the React Runtime. I personally find this idea compelling.

There are a few of these sorts of things already. I'm not really talking about opinionated frameworks (or collections of various github projects stuff into a big meta project). https://reactjs.org/community/starter-kits.html

What I'm talking about is something more akin to this statement: https://angular.io/guide/forms-overview "Handling user input with forms is the cornerstone of many common applications"

But isn't that something React wants to avoid? I remember reading somewhere that React does not want to recommend any approach to forms, routing, etc., but leave it to the user.

Vue is just like that. Actually from 3.0 it might be better than React.

Styling is handled out-of-the-box. Reactiveness will be glitch free with proxies and it will have TS support.

(Disclaimer: I use React right now)

I mean, I don’t think it’s designed to “put an input on the page”. Tracking things like hover, dirty and pristine states, sync and async validation, etc, is an inherently complex problem.

If you just want to put an input on the page, that’s just three lines with React. (Especially with Hooks.)

Reading the documentation again, I just remembered this page:

https://reactjs.org/docs/forms.html

Makes my point (happily) moot. You're right. Sorry for the trouble.