When building forms in React, many tutorials emphasize managing input state with <code>useState</code>, adding real-time validation, and updating UI as the user types. This is causes multipe re-renders and not every app needs real-time validation.
<h2>A Simpler Approach 🔥</h2>
Instead of tracking each input’s value in state, we can use the useRef hook and the FormData API to grab all inputs at once when the form is submitted.
<pre><code class="language-ts">import React, { useRef } from &quot;react&quot;;

export default function App() {
 const formRef = useRef();

 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 const formData = Object.fromEntries(new FormData(e.currentTarget));
 console.log(formData); // Business logic here
 formRef.current.reset(); // Clear inputs
 };

 return (
 &lt;form ref={formRef} onSubmit={handleSubmit}&gt;
 &lt;input name=&quot;username&quot; placeholder=&quot;Username&quot; /&gt;
 &lt;input name=&quot;email&quot; placeholder=&quot;Email&quot; /&gt;
 &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
 &lt;/form&gt;
 );
}
</code></pre>
<h2>Improvements</h2>
<ul>
<li>Less Re-Renders - Better Performance</li>
<li>Simpler Code</li>
<li>Enough for most cases</li>
</ul>
<h2>When Should You Use Real-Time Validation? 🤔</h2>
Of course, there are cases where real-time validation is needed.
<ul>
<li>Password strength indicators</li>
<li>Instant username availability checks</li>
<li>Inline form error messages</li>
</ul>
<h2>Conclusion</h2>
Keep It Simple!! Not every form needs fancy real-time validation. Consider your use case before adding complexity!

Sharing blogs, tutorials, tools, open source projects.

evolvedev

Not Every App Needs Real-Time Validation!

heard about debounce? how about validation on submit having a horrible UX? are you building a product users will love to use or just shiny piece of an app? Consider all of those.
Validation on submit is annoying to end users, they would rather know that something is wrong immediately, then filling the form and then have to go through some fields again.

And instead of formRef.current.reset() we can use e.target.reset();
No need for useRef

Great reminder! 🙌 Not every form needs real-time validation—sometimes simplicity = better UX + better performance.🔥