Using objects in hooks for forms - reactjs

Question

I have just started with REACT and is looking for a valid approach when working with forms with many controls. And i dont need any validation so I skipped react-hook-forms.
Is there any recommended practices when working with forms? I have around 20 inputs so it is a semi large form. I started out having a hook for each input, but realized fast it was a little hard to maintain. So I changed to having one hook with an object like this:
https://codesandbox.io/s/bind-input-kzzd3
I can see some people recommend reducers for forms, is there anything wrong just using a hook with an object like my sample for simplicity? What will a reducer give me extra? Or would you go for a hook for each input?
import React, { useState } from "react";
import "./styles.css";
import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap";
export default function App() {
const onSearch = val => {
alert(val);
};
return (
<div className="App">
<GetSearchForm onSearch={onSearch} />
</div>
);
}
const GetSearchForm = props => {
const [val, setVal] = useState();
const [formData, setFormData] = useState({
accountId: 0,
firstName: "",
lastName: ""
});
const onSearch = event => {
event.preventDefault();
props.onSearch(val);
};
return (
<Form onSubmit={onSearch}>
<Row>
<Col>
<FormGroup>
<Label for="exampleEmail">Account Id</Label>
<Input
type="number"
name="account"
id="account"
placeholder="AccountId"
onChange={e =>
setFormData({ ...formData, accountId: e.target.value })
}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col>
<FormGroup>
<Label for="firstName">Firstname</Label>
<Input
type="text"
name="firstName"
id="firstName"
placeholder="Firstname"
value={val}
onChange={e => setVal(e.target.value)}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col>
<FormGroup>
<Label for="exampleEmail">Lastname</Label>
<Input
type="text"
name="lastName"
id="lastName"
placeholder="Lastname"
value={val}
onChange={e => setVal(e.target.value)}
/>
</FormGroup>
</Col>
</Row>
<Button>Submit</Button>
<div>{JSON.stringify(formData, null, 2)}</div>
</Form>
);
};

Answer 1

i dont need any validation so I skipped react-hook-forms.
I assume that you are using a hook means React.useState. Yes, if you don't want to use other form library, it is perfectly fine to update your state that way. Just be careful when you are updating state in useEffect, there is a problem with closure, where state is not updated properly.
any recommended practices when working with forms
As mentioned above, be careful with closure, (state is not updated properly) I will advice to use a setState((prevState)=>return your modified state).
What will a reducer give me extra? Or would you go for a hook for each input?
useReducer has more control for you to setState.
I have around 20 inputs so it is a semi large form.
Best is to use a form library instead of making each an independent state. I have used formik, it doesnt require a state management to use, pre-built validation with or without yup. (when your form grows, which in your case >20 inputs)