DEV Community

I was creating Forms the wrong way all along in React.js 🤔

Kuvam Bhardwaj on August 01, 2022

Introduction When I was creating a signup form, I found myself creating dozens of useStates & then creating dozens of onChange handl...

Read full post

JoelBonetR 🥇 • Aug 1 '22

That's it!
It was really hard on my last projects to make junior devs to understand that, because if you only learnt react that's what you'll find in the doc about managed/controlled forms so React is the only "source of truth".

That's useful on multi-step forms but I still can't find a way in which this is better than using the DOM itself through HTML.

Moreover you can set validations as well in the HTML using the pattern attribute and use :valid and :invalid CSS selectors to style them depending on the state they're in (I thought I made a post on that stuff but I just realized I didn't so maybe I should cover all that stuff in a single place 😂).

Kuvam Bhardwaj • Aug 2 '22

Yeah, that appears quite a large bite for a junior dev to gulp 😂
Thanks for the comment btw ✨

JoelBonetR 🥇 • Aug 2 '22

Yes but just because some years ago people learnt HTML to the detail, then CSS, then JS browser API and then frameworks/libs.

I'm finding lately a good amount of juniors that don't know what is the real scope of React... I've even told by one that map is a React method 😅 so my guess is that the issue is the learning path itself...

Kuvam Bhardwaj • Aug 2 '22

This is a legit issue, and new frameworks like svelte for example, make you learn more of "svelte" and not more of "javascript". Svelte is cool & I love it, but I think one should know fundamentals of Vanilla JS before dipping toes in libraries/frameworks

JoelBonetR 🥇 • Aug 2 '22

Totally agree!

Mike Ritchie • Aug 3 '22

Thanks for bringing this up! Just because you’re using JavaScript to render the elements doesn’t mean you shouldn’t also render markup that does its own work too… use the tools for what they’re made for!

Anubha Pant • Aug 9 '22

Please do write a post and share all the knowledge you have.

JoelBonetR 🥇 • Aug 9 '22

I do it from time to time, check my profile!
Also follow to receive new posts in your feed 😁

JoelBonetR 🥇 • Aug 16 '22

Hi @anubha143 I finally bring this up, check it out! 😁

Form input validation WITHOUT JavaScript

JoelBonetR ・ Aug 15 ・ 2 min read

#css #tutorial #webdev #discuss

Kidus Adugna • Aug 2 '22 • Edited

Nice way of handling forms. We have to highlight the limitations as well though. You still need value and onChange when you want an input to update when another one is changed. Also if the form rerenders because of another component, your inputs will be cleared (happened to me with a component that shows the current time.) But for simple forms, where it's guaranteed that there will be no rerenders while you fill the form, it can save time.

Rense Bakker • Aug 2 '22

Form data is very nice yes :D For the cases where you need to do validation while the user is typing, or otherwise need to have controlled inputs, you can use something like Formik, or put state in a reducer:

const defaultState = {
  firstname: "",
  lastname: "",
  someOtherFormField: ""
}

function onChange(fieldName:string, value:string) {
  return {
    type: "CHANGE_FIELD" as "CHANGE_FIELD",
    payload: { fieldName, value }
  };
}

const reducerActions = [onChange] as const;

function myFormReducer(
  state: typeof defaultState,
  action: typeof reducerActions[number]
){
  switch (action.type) {
    case "CHANGE_FIELD":
      return { ...state, [payload.fieldName], payload.value }
    default:
      throw new Error();
  }
}

function myFormComponent(){
  const [{ firstname, lastname, someOtherFormField }, dispatch] = useReducer(myFormReducer, defaultState)
  return <form>
    <input value={firstname} onChange={e => dispatch(onChange('firstname', e.target.value))} />
    <input value={lastname} onChange={e => dispatch(onChange('lastname', e.target.value))} />
    <input value={someOtherFormField} onChange={e => dispatch(onChange('someOtherFormField', e.target.value))} />
  </form>
}

JoelBonetR 🥇 • Apr 1 '23

@brense Input validation on the spot without even using JS at all:

Form input validation WITHOUT JavaScript

JoelBonetR 🥇 ・ Aug 15 '22 ・ 2 min read

#css #tutorial #webdev #html

No Formik
No State
No Reducers
No extra boilerplate
Better RFC Compliance (see <input type="email" /> as example)

Rense Bakker • Apr 1 '23

Hmm, might give that a try... Have used the pattern prop before to force number keypad on phone etc, but never really considered it for actual validation... I do still think there's a use-case for linking actual state to the inputs when you want to do some calculated state for example, but for validation this looks pretty nice at first glance.

Philipp Renoth • Aug 1 '22

Thanks for sharing, cool article. Especially the new FormData(e.target) part make things more easy.

My opinion: don't use "controlled components". If you have them, remove them and use the approach <form onSubmit={..}>. If you need validation, you can check input in onChange and use like setUsernameError(..) if you need to really render the component to show an error, but not every keyboard hit will make it render.
At least there are some libs for forms.

Kuvam Bhardwaj • Aug 2 '22

Thanks for the comment, Philipp :)

Yes, you're right, and I personally use the same approach too, but I have seen in codebases, sometimes people like to use this
value{ x } onChange={e => setX(e.target.value)}

Thought might include it as well!

Andrew Bone • Aug 1 '22

Very cool, a much better way to interact with forms and save on that precious memory.

If you're going to be using this method a few times it's worth having a little hook with common functions built in, rather than writing them over and over.

Kuvam Bhardwaj • Aug 1 '22

Thanks for the code,
Great idea to abstract the logic into a hook 🙌🏻

DanK1368 • Aug 9 '22

What about handling forms like this?

const [values, setValues] = useState({
first_name: "",
last_name: "",
email: "",
})

const handleInputValues = (e) => {
    setValues(prevState => {
       return { ...prevState, [e.target.name]: e.target.value }
    })
}

<input type="text" name="first_name" onChange={handleInputValues}/>
<input type="text" name="last_name" onChange={handleInputValues}/>
<input type="text" name="email" onChange={handleInputValues} />

I've been using this method for some time now, without any issues

spotnick • Aug 3 '22

Very cool article! I did the same mistake in my early stages of react, generating a state for every property which I needed in my form :). Can you enlighten me one more. I used react-hook-form in the past. For controlled inputs I think it's unbeatable but would you still use the native html approach?

Kuvam Bhardwaj • Aug 3 '22

Man do what suits you best, Personally for me, I like to minimise package dependencies, thus would use the native HTML approach until it takes a lot of work to roll with it, then I would look for other alternatives as needed :)

spotnick • Aug 3 '22

Sounds legit. Not depending on a lib is always good. Can you do also dependant validation? Lets say if a=dog, b can only be "good Boy | bad Boy" ? Otherwise it has no validation.. smth like that? Is that possible with native HTML validators? I'm not experienced with that sorry if that sounds kinda stupid

Kuvam Bhardwaj • Aug 3 '22

Dont be sorry for asking stupid questions, NEVER.
Coming to HTML-native way of validating, HTML can check for empty fields but complex validation? no, you have to implement that yourself in the onSubmit handler.

See this code : codesandbox.io/s/trusting-torvalds...
Try submitting the form without entering any value ;)

spotnick • Aug 4 '22

Thanks. Yeah I was aware of "simple" validation. Ok if I need something more complex I will continue using react-hook-form :)

Hayk Safaryan • Aug 3 '22

This is quick and neat for very small or pet projects, but please use formik or react-hook-form for any real client production apps

JoelBonetR 🥇 • Apr 1 '23

Can you justify somehow this statement? There are better options

Bruno Noriller • Aug 4 '22

Not sure you've used this, but you can control them all in a single state with something like this:

handleChange = (e) => {
  setState((old) => ({...old, [e.target.name]: e.target.value}))
}

_jcyber • Aug 6 '22

Is it safe to say that generating multiple useStates for a form can cause a performance issue? Also I wonder why if there are better ways to handle input why don’t they teach that in bootcamps? That’s frustrating

Maxim Colesnic • Aug 5 '22

This is what can be solved in Vue in one line
<input type=“email” v-model=“formData.email” /> ?

Filipe Costa • Aug 15 '22

That and a lot more :D
I went from Vue to React and I can say it's a very very disappointing experience.
The only "plus" of React IMO is being popular.

Karl Krasnowsky • Aug 3 '22

Yeah, I've gone through the controlled form element exercise a few times but have decided using default html5 form validation and element types with some mods where needed does what I need without all of the event handling and state management overhead .
I'm personally annoyed by validations that pop up on element blurs, etc., and am perfectly happy with validation performed on submit. Standard pattern validation can provide most, if not all, of the oddball input requirement conditions, and overriding validation messages where needed to be more informative when needed.
Besides, IMO, this behavior is more expected. "Realtime" validation is unnecessarily noisy and can be clunky. Oh, and adds support overhead.

Brent Charlton • Aug 7 '22

Using react native - I ended up going down this route myself naturally but I actually found that having the complexities that this brings also hindered me quite a bit from actually creating quickly.
The reusability is helpful but I feel like it makes code harder to read somewhat

Georgey • Aug 2 '22

I use react hook forms, data validation + performance + state handling all in one, and bundle size is optimum as well.

Umair Butt • Aug 2 '22

A good intro to the inner workings of forms. But yeah, when it comes to forms, don’t do it yourself is my recommendation! Formik is one of the best libraries I’ve worked with and would highly recommend for anything form related.

webjoyable • Aug 5 '22

I understand this is just an HTML approach, but I encourage you to use libraries such as React Hook Form and Formik. Benefits are incomparable

Kuvam Bhardwaj • Aug 5 '22

Agreed 🙌

James 'Dante' Midzi • Aug 1 '22

Wait wait wait... Huh?

What is this sorcery? 😁

Kuvam Bhardwaj • Aug 2 '22

This sorcery is also called HTML ✨

James 'Dante' Midzi • Aug 2 '22

Ah yes, the most darkest of dark arts - HTML 😄

Ivan Jeremic • Aug 5 '22

react-hook-form is close to this vanilla approach and takes care of all edge cases, it us the best form lib out there for react.

Manjit Pardeshi • Aug 4 '22

Try something more better and extensible like Formik or Hook form

Horace FAYOMI • Aug 5 '22

Cool article, is there a way to do custom field validations on typing using that form DATA ?

Lamarcke • Aug 5 '22

Nice article. I highly suggest taking a look at Formik and similar libraries, it seems like that's what the cool kids are using nowadays.

Kuvam Bhardwaj • Aug 5 '22

I kinda wanted to take an HTML native approach here :)
Ofcourse, if you've got a complex use-case, you'd go for formik or any other form handling library,

Thanks for the comment btw 🙌🏻

Majd Hemud • Aug 4 '22

Noice 😎🔥

Lathifahdhiya • Aug 4 '22

Thank you for this! I never thought that I can abuse html form tag for submitting forms.

Chris Hansen • Aug 4 '22

I like this approach! Thanks for sharing. I graduated from a bunch of useStates, to using [e.target.name] approach, but this is far superior 💯 Can't wait to dive into it.

George Guo • Aug 3 '22

very good solution

Yuwang Cai • Aug 2 '22

Marked! Very helpful!

Kuvam Bhardwaj • Aug 2 '22

Glad you found it helpful 😊

iabhishekrajpoot • Aug 2 '22

That's awesome ☺️

Wilmela • Aug 2 '22

I actually used this on my last project. Thanks for throwing more light.

Kolapo Damola Usman • Aug 2 '22

Thanks for sharing this Kuvam, saving us from writing so many useState code

Sashe V. • Aug 1 '22

Yeah! That's the proper way to handle forms without third-party library

francoisaudic • Aug 3 '22

The form fields lack labels in order to be compliant to WCAG 2.1 : w3.org/TR/WCAG21/#name-role-value

Bello Akeem • Aug 2 '22

What about if uploading only image ?

Kuvam Bhardwaj • Aug 2 '22

Works just fine, mate 👍🏻
code: codesandbox.io/s/condescending-sha...

Adam Dennis • Aug 2 '22

Nice article… I’d recommend Formik.

Kuvam Bhardwaj • Aug 2 '22

Thanks :)
Yeah formik is good but I wanted to discuss the HTML-way of handling forms 🙌🏻

Jon Randy 🎖️ • Aug 3 '22 • Edited

Reading the article and the comments is hilarious, and kind of sad. Together, they speak volumes about the awful way web development seems to be being learnt/taught these days.

XTEALER • Aug 4 '22

Or better use react-hook-form + yup for easiest management of validators and error messages plus values.