Don’t use State for React Forms. Use this instead!

<p>Learn how to optimize the performance of react forms by replacing&nbsp;<code>useState</code>&nbsp;with the native feature of JavaScript.</p> <p><img alt="" src="https://miro.medium.com/v2/resize:fit:700/0*mxFCMzxkEIx36nhK" style="height:467px; width:700px" /></p> <p>Photo by&nbsp;<a href="https://unsplash.com/@lautaroandreani?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Lautaro Andreani</a>&nbsp;on&nbsp;<a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></p> <h1>Introduction</h1> <p>When it comes to handling forms in react, the most popular approach is to store the input values in state variables. One of the reasons for following this approach is because, it&rsquo;s React, after all, and everyone tend to use hooks that comes with it. Using hooks solve a lot of problems in React, but is it really required when it comes to forms? Let&rsquo;s check it out.</p> <h1>Problem with using States</h1> <p>As we already know, whenever the value of the state variable changes inside a component, react will re-render the component to match its current state. Though, it&rsquo;s not a big issue in small applications, it may cause performance bottlenecks as your application grows in size.</p> <p>When it comes to form, react will attempt to re-render the component everytime the input (state) changes.</p> <p><a href="https://javascript.plainenglish.io/dont-use-state-for-react-forms-use-this-instead-7e2923550cd1">Click Here</a></p>