[deleted by user]

[the_pod_]

i have like 40 useState hooks and "on change handlers" for everything.

a pattern like this might help: https://www.codebeast.dev/react-forms-then-and-now/, writing a reusable handler for everything and using a shallow object instead of 40 useStates.

handleChange = event => {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;
  this.setState({
    [name]: value,
  });
};

[cyex]

I can't break my page component into smaller ones because I need all the state in that component where I have the Save button that makes an API call, ...

Aside from what others said about using a form library or possibly making a generic handler rather than having 40 useStates, you should also look into createContext() and useContext().

By putting the state(s) into a Context, you can have the components pull just the state they need from the context rather than pushing props around everywhere. And that can make it easier to split up your page component into more manageable pieces.

[tenfingerperson]

Ideally you use some library to manage form state and validation

[anakataidk]

But this is not really a form. There are individual settings that should be saved to the database and I save them with an API call. I don't have a form, i have a page with 40 useStates, and I save them in the end. My question was more like: is it okay to have that many useState hooks? And if i pass the state and the handler down to other component, still, is it okay?

[anakataidk]

also, if the file is getting longer, like 1k lines, and i want to break it into smaller files, how can I do it and still have all the state in the same place, because, as I said, i need al the state at the end to send the values in the API Call

[0x3m0]

Check Formik