What are you using for forms?

Question

React

Hello. When starting any project, I always think about how to process forms. First I wrote my onChange and the Input component

export const onChange = (e, val = "value") => dispatch => {
  let type = e.target.name; //actionType of reducer
  let property = e.target.id; // reducer's property
  let value = e.target[val]; // input value
  let { errors } = validate[type]({ [property]: value }); // error object for all related inputs

  dispatch([
    {
      type: type,
      payload: { [property]: value, isDataChange: true }
    },
    {
      type: `${type}_ERROR`,
      payload: {
        errors: { [property]: get(errors, property) }
      }
    }
  ]);
};

But with fast data entry, it is unrealistic to lag.
Questions:

1. How do you process forms?
   
2. How do you do validation (do you create a separate config file)?
   

And if possible, please provide examples.

Answer 1

In the vast majority of cases, there is absolutely no point in storing form state in a store.
Answers:
1. I use either controlled components or refs . The state of forms, in the case of controlled components, is stored in the state of the parent component.
2. It all depends on the project and requirements. Somewhere a couple of checks in onSubmit are enough, and somewhere the form can be generated according to the data received from the server and validated according to the received rules.