Learn how to optimize the performance of react forms by replacing useState with the native feature of JavaScript.

Hackernoon goes beyond the surface to explore the intricacies of technology, entrepreneurship, and innovation. With a diverse range of articles, opinion pieces, and tutorials, Hackernoon dives deep into the latest developments in software development, blockchain, AI, and more. From analyses of industry trends to practical advice on coding and career growth, Hackernoon empowers readers to navigate the rapidly changing landscape of tech with confidence and insight.

Hacker Noon

The most popular approach to handling forms in React is to store the input values in state variables. When it comes to form, React will attempt to re-render the component every time the input (state) changes. We will use the state to manage the form inputs.

Stop Using State for React Forms, There is a Much Better Way!

This approach is okay if you don’t want to use libs, but I think this lib <a href="https://www.react-hook-form.com" target="_blank" rel="noopener nofollow">react hook forms</a> is the best and easiest to use. Maybe some kind of “standard” today. Also, it is easy to validate and show errors. Your opinion?

theres a better way, switch to Svelte.

I’m already tried to doing this scenario, but I have no clue how to bind validation on the inputs in this case or how to set my submit button disabled, while not all inputs are valid? (I’m coming from Vue/Angular world)

I was already doing it for the simplicity of working with native FormData, but I had no clue about its pros in terms of renders.
Thank you! Very well explained

It’s called vue. React is legacy:
<code>&lt;input v-model=&quot;name&quot; /&gt;</code> is a two-way data binding for inputs in vue.