form.js

import { useMemo, useState } from "react"

class Form {
	state = {
		user: "Hello, world!",
		pass: "Hello, world!",
	}
	constructor({ user, pass } = { user: "Hello", pass: "World" }) {
		this.state = {
			user,
			pass,
		}
	}
	setUser(user) {
		this.state.user = user
	}
	setPass(pass) {
		this.state.pass = pass
	}
}

function useRender() {
	const [, setState] = useState(0)
	return () => setState(s => s + 1)
}

export default function App() {
	const form = useMemo(() => new Form(), [])
	const render = useRender()

	return (
		<>
			<form>
				<input
					type="text"
					value={form.state.user}
					onChange={e => {
						form.setUser(e.target.value)
						render()
					}}
				/>
				<input
					type="text"
					value={form.state.pass}
					onChange={e => {
						form.setPass(e.target.value)
						render()
					}}
				/>
			</form>
			<pre>here: {JSON.stringify(form, null, 2)}</pre>
		</>
	)
}