React Hook Form & React 19 Form Actions, The Right Way

Показать описание

Let's figure out how to get form actions and React Hook Form to work together to get the best from both; client AND server side validation when JavaScript is enabled on the client, and user friendly server side validation when it's not enabled.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
01:40 Setting Up Client Side Validation
04:30 Calling A Server Action
08:35 The useFormState Hook
10:06 Bringing Back Client Validation
11:24 Using the State From useFormState
15:32 Outroduction

Рекомендации по теме

Комментарии

About to launch my first freelance production application and this video came at the right time! Used this library at my previous job all the time, but configuring it with server actions was a bit tricky and new to me. Thanks again, Jack! This combined with your "lightning fast" React Context state manager is a power horse setup!

scottsmith

Dude I owe you my life, this was the ONLY place I could find the solutions I needed. Thank you so much

LucasGabriel-xznk

I was fiddling with this for a while, didnt quite get with having the client and server validation. Great to know how to do it know! ❤

victorlongon

Every time I encounter one of your videos in my Youtube feed I become a little better at web tech. Thanks for just being there like a tiny jewel amidst all the junk that often pollutes my Youtube feed. 🙂

dazecm

Much love for your high-quality content! Always learnings new things 🙂

phantom

Man, this is awesome 💯 This is one of the reasons I ditched react hook form due to the fact I thought I'd be loosing the benefit of server-side validation. Goes to show you that Knowledge is Power. Thanks for this, and I'm checking out your site ASAP 😍

iamprincemuel

Loving the website you built btw Jack!!! Great timing <3

goatslayer

And we are back to 200 response with an error inside

clockworkop

I wish nextjs documentation would be this clear instead of half-explained stuff. Amazing stuff, literally all 16 minutes covered all my issues with server actions and hook form.

mashermack

Holy shit Jack. Every time I am working my project - I see your videos pop up with exactly the right topic. It's like you are spying on me. You are the best teacher I ever had.

PeterJaffray

detailed description of the nextjs form.thanks, ♥

zaheerabbas

This is exactly how we’ve been doing it in our next.js app router production application. Yes a lot of boiler plate but you get validation at client and the server and status messages sent back from the server to the user. I believe RHF is working on integrating with server actions / react server components which will reduce boilerplate and improve the api for doing all this.

dwolrdcojp

Amazing guide, and thank you for the free tutorials!

levato

A bit verbose but pretty cool! I'd definitely write some wrappers for handling all the zod stuff and mapping between formdata and objects, 100 line component for just an email form is a bit much.
That's also why I don't like this component pattern with <Field> <Label/> <Input/> </Field>, I usually wrap this with a single component as well. It's great when a library uses it because you can wrap it however you please, but building inputs with more than one component gets tiring pretty fast.

helleye

hey Jack! Great video! I followed your fix for the "React form was unexpectedly submitted" case, but now as I tried to add the useFormStatus hook, it doesn't get aware of the pending state, because we are basically making our way around the "action" prop itself. Do you have an idea to solve this? Thanks!

flavioneto

insanely good and informative! thank you!

albert

I get the following error:

Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().

Skillthrive

Nice tutorial! react-hook-form offers APIs like setError to manually set the error message if you wanted to target the field with the error and put your message there too.

JGBSolutions

Much appreciated, I have spent the whole day trying to do that before watching your video. lol

guitox

Next.js is the best thanks for the video and the free forum course!!!

codernerd

React Hook Form & React 19 Form Actions, The Right Way

React Hook Form - Complete Tutorial (with Zod)

How to build elegant React forms with React Hook Form

React Hook Form & React 19 Form Actions, The Right Way

ReactJS Course [11] - React-Hook-Form and YUP Tutorial | How to do Forms The Right Way

React Hook Form Crash Course - Speed Up Writing React Form

React Hook Form (+ Zod) - Complete Tutorial

React Hook Form - React Forms Episode II

Reusable Create & Edit Form in React (React Hook Form, Zod)

Simple Registration Form Using Material UI with React Hook Form

React Forms Handle & Validation Tutorial | React Sign up Form | React Hook Forms for Beginners

React Hook Form Course for Beginners (inc. Zod + Material UI)

React Hook Form Tutorial - 15 - Dynamic Fields

React Hook Form - простая работа с формами

React Hook Form - Get Started

What is my favorite way to handle forms in React?

Валидация форм с react-hook-form в React-приложениях

React Hook Form Tutorial - 3 - useForm Hook

React Hook Form Tutorial - 7 - Form Submission

React js Form Validation tutorial | React Hook Form Advance Usages

React Form Validations ( with YUP ) - Full Tutorial 2024 🔥🔥

This New React Hook Changes How You Use Forms

Form Validation in React with React Hook Form.

React Hook Form Tutorial - 10 - Custom Validation

React Hook Form - Controller