React form handling with react-hook-form and Zod validation

<p>I am building forms in React that have re-render performance issues from controlled inputs, complex validation, and async submission errors from the API. I want a clean performant solution.</p>

<p>react-hook-form with Zod schema:</p> <div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useForm</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'react-hook-form'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">zodResolver</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'@hookform/resolvers/zod'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">z</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'zod'</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">TraceSchema</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">z</span><span class="p">.</span><span class="nx">object</span><span class="p">({</span> <span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mf">5</span><span class="p">,</span><span class="w"> </span><span class="s1">'At least 5 characters'</span><span class="p">).</span><span class="nx">max</span><span class="p">(</span><span class="mf">500</span><span class="p">),</span> <span class="w"> </span><span class="nx">contextText</span><span class="o">:</span><span class="w"> </span><span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="s1">'Be descriptive'</span><span class="p">),</span> <span class="w"> </span><span class="nx">solutionText</span><span class="o">:</span><span class="w"> </span><span class="kt">z.string</span><span class="p">().</span><span class="nx">min</span><span class="p">(</span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="s1">'Include code and explanation'</span><span class="p">),</span> <span class="w"> </span><span class="nx">tags</span><span class="o">:</span><span class="w"> </span><span class="kt">z.array</span><span class="p">(</span><span class="nx">z</span><span class="p">.</span><span class="kt">string</span><span class="p">()).</span><span class="nx">min</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="s1">'At least one tag'</span><span class="p">).</span><span class="nx">max</span><span class="p">(</span><span class="mf">5</span><span class="p">),</span> <span class="p">});</span> <span class="kr">type</span><span class="w"> </span><span class="nx">TraceForm</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">z</span><span class="p">.</span><span class="nx">infer</span><span class="o">&lt;</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">TraceSchema</span><span class="o">&gt;</span><span class="p">;</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">CreateTraceForm</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">register</span><span class="p">,</span><span class="w"> </span><span class="nx">handleSubmit</span><span class="p">,</span><span class="w"> </span><span class="nx">formState</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">errors</span><span class="p">,</span><span class="w"> </span><span class="nx">isSubmitting</span><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="nx">setError</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span> <span class="w"> </span><span class="nx">useForm</span><span class="o">&lt;</span><span class="nx">TraceForm</span><span class="o">&gt;</span><span class="p">({</span><span class="w"> </span><span class="nx">resolver</span><span class="o">:</span><span class="w"> </span><span class="kt">zodResolver</span><span class="p">(</span><span class="nx">TraceSchema</span><span class="p">)</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">onSubmit</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">(</span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">TraceForm</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">traces</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">err</span><span class="w"> </span><span class="ow">instanceof</span><span class="w"> </span><span class="nx">ApiError</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">err</span><span class="p">.</span><span class="nx">status</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="mf">409</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">setError</span><span class="p">(</span><span class="s1">'title'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">message</span><span class="o">:</span><span class="w"> </span><span class="s1">'Title already exists'</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">setError</span><span class="p">(</span><span class="s1">'root'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">message</span><span class="o">:</span><span class="w"> </span><span class="s1">'Submission failed. Try again.'</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">form</span><span class="w"> </span><span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">onSubmit</span><span class="p">)}</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">input</span><span class="w"> </span><span class="p">{...</span><span class="nx">register</span><span class="p">(</span><span class="s1">'title'</span><span class="p">)}</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="p">{</span><span class="nx">errors</span><span class="p">.</span><span class="nx">title</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">errors</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/span&gt;}</span> <span class="w"> </span><span class="p">{</span><span class="nx">errors</span><span class="p">.</span><span class="nx">root</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">errors</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">message</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;}</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">button</span><span class="w"> </span><span class="nx">disabled</span><span class="o">=</span><span class="p">{</span><span class="nx">isSubmitting</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">isSubmitting</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">'Saving...'</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">'Save'</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/button&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/form&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p>Key points: - react-hook-form uses uncontrolled inputs -- no re-render per keystroke - zodResolver connects Zod schema validation to the form - setError('root', ...) for non-field API errors - isSubmitting prevents double submission - z.infer generates TypeScript type from Zod schema</p>