This New React Hook Changes How You Use Forms

React Simplified Course: reactsimplified.com/?...
React recently announced a new experimental hook that makes working with forms so much easier. This hook solves issues related to double submitting forms, loading states, and so much more.
📚 Materials/References:
React Simplified Course: reactsimplified.com/?...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:57 - Traditional Solution
02:45 - useFormStatus Solution
#ReactJS #WDS #useFormStatus

Пікірлер: 84

  • @WebDevSimplified
    @WebDevSimplified11 ай бұрын

    React Simplified Course: reactsimplified.com/?Udtt6H5CE

  • @ankitshukla9257

    @ankitshukla9257

    11 ай бұрын

    You can also use use-form-hook

  • @mahmudaremu4907

    @mahmudaremu4907

    11 ай бұрын

    Please can you make a review of the exchange-router module on npm

  • @GaryMenzel
    @GaryMenzel11 ай бұрын

    I'll at least echo some of what has already been said. React Hook Form has a lot of additional features that this new hook wont cover - so I'll be sticking with that. While I don't consider it to be "magic" (clearly the tag now has a context associated with it), it still feels like a little bit of "sleight of hand-ish". In RHF you explicitly have to use their context component to be able to refer to the enclosing form in child components. So there is some level of "mystery" with this new React hook. I can see that it may help isolate naming conflicts but just how many places in a component containing form do you really need a "pending" state? If you are writing tightly-purposed components... maybe once in that component? So I think naming clashes are going to be rare. Also, as pointed out, there's not much difference in the amount of code being written and the benefits come more to those using React in a SSR environment - especially where FormData is prominent.

  • @Andy-si1pl

    @Andy-si1pl

    11 ай бұрын

    Yeah I instantly thought reacr-hook-form too. I guess eventually it may be redundant

  • @MrMudbill
    @MrMudbill11 ай бұрын

    The input ref wasn't really needed in the previous implementation anyway, since you automatically get refs for named inputs within forms in the FormEvent given in onSubmit. You can have a near-identical implementation for onSubmit by doing `const data = new FormData(e.currentTarget)`.

  • @axelramirezludewig306

    @axelramirezludewig306

    11 ай бұрын

    Nice one

  • @dmytrk
    @dmytrk11 ай бұрын

    I'm using react-hook-form for this and it gives additional benefits, such as schema validation with various libs (Yup, Zod, etc.)

  • @NOTHING-en2ue
    @NOTHING-en2ue11 ай бұрын

    very great tutorial, thanks a lot ❤

  • @Avarn388
    @Avarn38811 ай бұрын

    Nice. It was just dealing with this bug in my application so seeing this being addressed with a new hook, it’s right up my alley. Thank you.

  • @caincobain9318
    @caincobain931811 ай бұрын

    that's exactly how remix run are handling forms, I was surprised how no one in the comment or even you Kyle did monition it.

  • @user-nv1os5ni1y
    @user-nv1os5ni1y10 ай бұрын

    Thanks a lot for this tutorial.

  • @parassharma7041
    @parassharma704111 ай бұрын

    Thank you🎉

  • @mma93067
    @mma9306711 ай бұрын

    Mantine’s useform + zod feels light years ahead tho

  • @hassanshahid9499
    @hassanshahid94998 ай бұрын

    your course is best for React Hooks , Appriciated

  • @hireetech
    @hireetech11 ай бұрын

    Awesome!😍

  • @joepetrillo6185
    @joepetrillo618511 ай бұрын

    Does anyone have a guess on when these new hooks will be released as stable? Seems like they should have existed long ago.

  • @Dev-Siri

    @Dev-Siri

    11 ай бұрын

    Seems like it will take some more time because this is a fairly recent feature that is a complement to Server Actions (SA are still in alpha)

  • @sokoyaadedolapo5321

    @sokoyaadedolapo5321

    11 ай бұрын

    Always check their documentation

  • @sicfxmusic

    @sicfxmusic

    11 ай бұрын

    I don't know bro, maybe check their roadmap.

  • @joepetrillo6185

    @joepetrillo6185

    11 ай бұрын

    @@sicfxmusic ok bro

  • @bogdanfilimon2486

    @bogdanfilimon2486

    11 ай бұрын

    These all “new concepts” from react / vercel / nextjs team is taken from Remix. So you can just use Remix and have all the goodies stable (in general).

  • @ajlmusic
    @ajlmusic11 ай бұрын

    Awesome!

  • @magicfibre
    @magicfibre11 ай бұрын

    Is passing a callback to the "action" something that also comes with the new React version, or is it something that exists already? If it's available in the current version of React, why aren't we using it instead of onSubmit?

  • @anonymous_dev9472
    @anonymous_dev947211 ай бұрын

    Kyle, pls bring out a full length react course on youtube 🙏🏻

  • @axelramirezludewig306
    @axelramirezludewig30611 ай бұрын

    This is truly epic! The php feel

  • @greybluesea
    @greybluesea11 ай бұрын

    BTW, does the 'data' of 'FormData' type has a method to allow us to set it blank right after submit?

  • @YourEverydayDeveloper
    @YourEverydayDeveloper11 ай бұрын

    react solves problems that react has created in the first place

  • @fave1201
    @fave120111 ай бұрын

    Nice video. I prefer the first method though. At times, there may be some logic to be done like show a toast and just having one loading state that's your single source of truth seems easier and more straightforward.

  • @ziadx3
    @ziadx310 ай бұрын

    i love this react hook!

  • @hawarhekmat1174
    @hawarhekmat117411 ай бұрын

    why i love nextjs ❤❤❤❤

  • @kaas99
    @kaas9911 ай бұрын

    This seems pretty similar to AntD implementation of Form but, it's good to have this out of the box.

  • @noelethan6230
    @noelethan623011 ай бұрын

    Great tutorial, can see react is getting a PHP feel

  • @Pedro-yq8ro
    @Pedro-yq8ro11 ай бұрын

    Hey Kyle great vid, listen how can I use env vars with vite + react?

  • @williamliu796
    @williamliu79611 ай бұрын

    would you use this over react hook form?

  • @oscardasilva971

    @oscardasilva971

    11 ай бұрын

    I was wondering the same

  • @wchorski

    @wchorski

    11 ай бұрын

    it's nice for learning cutting edge, but would never use any alpha/beta in a production product. React Hook Form, is meant to be used in production out of the box

  • @TannerBarcelos

    @TannerBarcelos

    11 ай бұрын

    Like William said, in prod I’d stick to RHF, but once this goes stable, I’d be more inclined to use this as it’s built in and requires less package overhead in my bundles.

  • @helleye311
    @helleye31111 ай бұрын

    if only this wasn't formdata I'd be excited. But I really don't like working with that. I mean sure it's native and it technically makes sense, but json is just so much nicer most of the time. Only time I use FormData is with file upload, and I always hate every minute of it.

  • @govinda399
    @govinda39911 ай бұрын

    thanks guruji :)

  • @user-cy8mh5sc4n
    @user-cy8mh5sc4n11 ай бұрын

    The only channel whose speed I'm slowing down.

  • @greybluesea

    @greybluesea

    11 ай бұрын

    same here, speed 0.75 for Kyle

  • @pieter5466
    @pieter546611 ай бұрын

    The first minute of this video reminds me of how important consistent dog-fooding of your own [company's] application is. You can't just develop on your local machine, and under/for your own circumstances, technical and other. You must incorporate a realistic range of devices, network/speed ranges, screen sizes, etc. into your dev iterations, AND frequently use your app out in the wld.

  • @abhinavtariyal6099
    @abhinavtariyal609911 ай бұрын

    What about useNavigation hook? How is it different from this hook?

  • @TannerBarcelos
    @TannerBarcelos11 ай бұрын

    Why this wasn’t the behavior from day 1, idk. But this is a beautiful addition.

  • @bikbokken6040
    @bikbokken604011 ай бұрын

    When will your NextJS course be released on your course platform? :D

  • @LaravelScreencast
    @LaravelScreencast10 ай бұрын

    I feel using state is easier, and creating a custom form component😀!

  • @tak68tak
    @tak68tak11 ай бұрын

    would this affect Next.js Server Action?

  • @luisfrocha1
    @luisfrocha111 ай бұрын

    This is pretty much how useFetch works on Nuxt 3, except it doesn't require tying specifically to a form.

  • @chesterxp508
    @chesterxp5088 ай бұрын

    GoodJob!

  • @developer_bola
    @developer_bola11 ай бұрын

    Hi Kyle! I need crud app with json server lesssons! Please tech it and upload lesson

  • @simbarashemaunga5575
    @simbarashemaunga557511 ай бұрын

    Neat, but I will stick to disabling the button though

  • @XboxArqain
    @XboxArqain11 ай бұрын

    Use react-hook-forms is the best

  • @daveckw
    @daveckw7 ай бұрын

    isnt this even more complicated than the original isLoading

  • @raistlinmajere2257
    @raistlinmajere225711 ай бұрын

    Why don't you have any angular tutorials?

  • @gendumaladi9448
    @gendumaladi944811 ай бұрын

    Still too many line codes. If It was related tô the structure of the like a paramater telling to "wait" the onclick function to happen.

  • @salixar
    @salixar11 ай бұрын

    geez React gets overloaded with hooks that are really just workarounds for basic stuff. Instead of clean code we get a bunch of functions that have some "magic" going on under the hood. Maaan as I get older, I tend to dislike React very much.

  • @Shebu

    @Shebu

    11 ай бұрын

    Same

  • @YourEverydayDeveloper

    @YourEverydayDeveloper

    11 ай бұрын

    thats exactly what happens

  • @dixztube

    @dixztube

    10 ай бұрын

    I agree. I’m not doing my next project in react.

  • @richardvsiansky6950
    @richardvsiansky695011 ай бұрын

    Data Driven Forms is still a way to go for me. This is really limited. :/

  • @TM_LBenson
    @TM_LBenson11 ай бұрын

    I always turned my submit button into a spinner until I get a reply from the api

  • @roycechriston5389

    @roycechriston5389

    11 ай бұрын

    I do the same

  • @firedforfighting
    @firedforfighting11 ай бұрын

    Personally I feel this is just unecessary, maybe for really complex multistep forms like a visa application software I can understand but to me there is no way that your initial solution or a oneline debounce function is more complicated than implementing all of this especially compared to your complaints being "an extra loading variable??, difficult getting names correctly??" like what?, I'm happy for the vid though

  • @i-am-the-slime
    @i-am-the-slime11 ай бұрын

    This can't happen when using RemoteData in PureScript

  • @muneebkarim3738
    @muneebkarim373811 ай бұрын

    Bro I am From Pakistan, For me Your courses are too Expensive 🥺🥺

  • @dixztube

    @dixztube

    10 ай бұрын

    What would be a good usd cost for Pakistan viewers. Impressive you know English.

  • @usmanabdurehman97

    @usmanabdurehman97

    10 ай бұрын

    You don't need to buy anything. There is enough free material present on the internet to learn from. I am a self taught developer and learnt everything for free.

  • @Marcosmapf
    @Marcosmapf11 ай бұрын

    4:20 lost me on creating a new and unecessary abstraction just to provide context to the tool, doesn't feel like a good syntax

  • @lucascorey3475
    @lucascorey347511 ай бұрын

    Imagine not using Svelte.

  • @DanelonNicolas
    @DanelonNicolas11 ай бұрын

    I wasn't subscribed... sorry bro, love your channel

  • @evgeniik_
    @evgeniik_11 ай бұрын

    I am so far away.

  • @wishmeheaven
    @wishmeheaven10 ай бұрын

    1. I'll pretend that I managed to follow everything you said. 2. It is not the first time that you are uploading content of hooks with an experimental status. And what if the experiment will fail..? I find this urgency for being the first one talking about it, at least...... Questionable.

  • @shamaeelahmed3561
    @shamaeelahmed356111 ай бұрын

    I just started react and i don't know what projects to make ..... can anyone help me out

  • @thesunabsolute
    @thesunabsolute11 ай бұрын

    Meh, the old way is easier.

  • @gregupton6351
    @gregupton635111 ай бұрын

    You should have started the video by saying this is an experimental hook! 🙄

  • @mdmofazzalhossain77
    @mdmofazzalhossain7711 ай бұрын

    not that much helpful. Give us the best way of handling form data without pre rendering

  • @DannonDARKO
    @DannonDARKO11 ай бұрын

    Can we finally stop using todo stuff for react tutorials?