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

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 😂).

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.

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>
}

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.

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.

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

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?

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

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}))
}

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

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

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.

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

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

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.