form-fixed.jsx

// we create a Memoized functional component here, notice React.memo()
const SimpleFormField = React.memo(({ name, value, onUpdate }) => {
  return <input type="text" value={value} name={name} onChange={onUpdate} />
})

const SimpleForm = () => {
  const [{ name, address }, setFormState] = useState({ name: '', address: '' });

  const handleSubmit = (ev) => {
    ev.preventDefault();
    console.log(name, address);
  };

  const updateField = useCallback((ev) => {
    const { name, value } = ev.currentTarget;
    setFormState((current) => ({ ...current, [name]: value }));
  }, [setFormState]);

  return (
    <form onSubmit={handleSubmit}>
      <SimpleFormField name={'name'} value={name} onUpdate={updateField} />
      <SimpleFormField name={'address'} value={address} onUpdate={updateField} />

      <input type="submit" value="Save" />
    </form>
  );
};