diff --git a/.changeset/two-crews-eat.md b/.changeset/two-crews-eat.md
new file mode 100644
index 0000000..63795f9
--- /dev/null
+++ b/.changeset/two-crews-eat.md
@@ -0,0 +1,8 @@
+---
+"@formulier/docs": minor
+"@formulier/examples-react": minor
+"@formulier/core": minor
+"@formulier/react": minor
+---
+
+Update Formulier, useFormField implementations
diff --git a/docs/docs/react-components/guide-getting-started-example.jsx b/docs/docs/react-components/guide-getting-started-example.jsx
index 6f510aa..7f8f496 100644
--- a/docs/docs/react-components/guide-getting-started-example.jsx
+++ b/docs/docs/react-components/guide-getting-started-example.jsx
@@ -37,9 +37,10 @@ function InputField({name, label, type = 'text'}) {
 				{label}
 			</label>
 			<input
+				{...field}
 				className="input"
 				type={type}
-				{...field}
+				name={name}
 				value={field.value || ''}
 				onChange={event => field.onChange(event.target.value)}
 			/>
diff --git a/docs/docs/react-components/guide-validation-min-length.jsx b/docs/docs/react-components/guide-validation-min-length.jsx
index 67a6f71..fefba7c 100644
--- a/docs/docs/react-components/guide-validation-min-length.jsx
+++ b/docs/docs/react-components/guide-validation-min-length.jsx
@@ -50,9 +50,10 @@ function InputField({name, label, type = 'text', minLength}) {
 				{label}
 			</label>
 			<input
+				{...field}
 				className="input"
 				type={type}
-				{...field}
+				name={name}
 				value={field.value || ''}
 				onChange={event => field.onChange(event.target.value)}
 			/>
diff --git a/docs/docs/react-components/guide-validation-required.jsx b/docs/docs/react-components/guide-validation-required.jsx
index 59b6a8a..36ba759 100644
--- a/docs/docs/react-components/guide-validation-required.jsx
+++ b/docs/docs/react-components/guide-validation-required.jsx
@@ -55,9 +55,10 @@ function InputField({name, label, type = 'text', minLength, required}) {
 				{label}
 			</label>
 			<input
+				{...field}
 				className="input"
 				type={type}
-				{...field}
+				name={name}
 				value={field.value || ''}
 				onChange={event => field.onChange(event.target.value)}
 			/>
diff --git a/docs/docs/react/api/use-form-field.md b/docs/docs/react/api/use-form-field.md
index dbfc952..f53d4ec 100644
--- a/docs/docs/react/api/use-form-field.md
+++ b/docs/docs/react/api/use-form-field.md
@@ -9,8 +9,8 @@ function TextInput({name, label}) {
 
   return (
     <>
-      <label htmlFor={name}>{label}</label>
-      <input id={name} type="text" {...fieldProps} />
+      <label htmlFor={field.id}>{label}</label>
+      <input name={name} type="text" {...field} />
       {meta.error && <span>{meta.error}</span>}
     </>
   )
diff --git a/docs/docs/react/guide/validation.md b/docs/docs/react/guide/validation.md
index bec8dfe..873f324 100644
--- a/docs/docs/react/guide/validation.md
+++ b/docs/docs/react/guide/validation.md
@@ -9,7 +9,7 @@ This makes it easy to validate when the form has conditional fields or requires
 Let's validate that the `firstName` and `lastName` are at least 2 characters long.\
 We start with the form we made on the [Getting Started](./getting-started) page.
 
-<<< @/react-components/guide-validation-min-length.jsx{20,21,30,32-43,45,59}
+<<< @/react-components/guide-validation-min-length.jsx{20,21,30,32-43,45,60}
 
 ## Example: Required
 
diff --git a/examples/react/src/fields.tsx b/examples/react/src/fields.tsx
index 16b48ba..13024a7 100644
--- a/examples/react/src/fields.tsx
+++ b/examples/react/src/fields.tsx
@@ -9,8 +9,15 @@ export function TextField({name, label}: {name: string; label: string}) {
 	const {error} = meta
 
 	return (
-		<Field name={name} label={label} error={error}>
-			<input type="text" id={id} value={value || ''} onChange={event => onChange(event.target.value)} onBlur={onBlur} />
+		<Field id={id} label={label} error={error}>
+			<input
+				type="text"
+				id={id}
+				name={name}
+				value={value || ''}
+				onChange={event => onChange(event.target.value)}
+				onBlur={onBlur}
+			/>
 		</Field>
 	)
 }
@@ -23,11 +30,12 @@ export function IntegerField({name, label}: {name: string; label: string}) {
 	const {error} = meta
 
 	return (
-		<Field name={name} label={label} error={error}>
+		<Field id={id} label={label} error={error}>
 			<input
 				type="number"
 				step="1"
 				id={id}
+				name={name}
 				value={value || ''}
 				onChange={event => onChange(parseInt(event.target.value, 10))}
 				onBlur={onBlur}
@@ -44,8 +52,8 @@ export function SelectField({name, label, children}: {name: string; label: strin
 	const {error} = meta
 
 	return (
-		<Field name={name} label={label} error={error}>
-			<select id={id} value={value || ''} onChange={event => onChange(event.target.value)} onBlur={onBlur}>
+		<Field id={id} label={label} error={error}>
+			<select id={id} name={name} value={value || ''} onChange={event => onChange(event.target.value)} onBlur={onBlur}>
 				{children}
 			</select>
 		</Field>
@@ -60,10 +68,11 @@ export function CheckboxField({name, label}: {name: string; label: string}) {
 	const {error} = meta
 
 	return (
-		<Field name={name} label={label} error={error} displayHorizontal>
+		<Field id={id} label={label} error={error} displayHorizontal>
 			<input
 				type="checkbox"
 				id={id}
+				name={name}
 				checked={value || false}
 				onChange={event => onChange(event.target.checked)}
 				onBlur={onBlur}
@@ -73,13 +82,13 @@ export function CheckboxField({name, label}: {name: string; label: string}) {
 }
 
 export function Field({
-	name,
+	id,
 	label,
 	error,
 	children,
 	displayHorizontal = false,
 }: {
-	name: string
+	id: string
 	label: string
 	error: string | null
 	children: React.ReactNode
@@ -87,7 +96,7 @@ export function Field({
 }) {
 	return (
 		<div className={`field ${displayHorizontal ? 'horizontal' : ''}`}>
-			<label className="field-label" htmlFor={name}>
+			<label className="field-label" htmlFor={id}>
 				{label}
 			</label>
 			<div className="field-input">{children}</div>
diff --git a/packages/core/src/form.ts b/packages/core/src/form.ts
index 1958c51..d52e1f6 100644
--- a/packages/core/src/form.ts
+++ b/packages/core/src/form.ts
@@ -1,4 +1,4 @@
-import {FieldValidator, FormListener, FormulierState, Nullable, Primitives, Values} from './types'
+import {FieldValidator, FormulierState, Nullable, Primitives, Values} from './types'
 import {getPath, isEqual, removeKey, setKey, setPath} from './state-utils'
 
 export interface FormulierOptions<V extends Values, P extends Primitives> {
@@ -6,121 +6,140 @@ export interface FormulierOptions<V extends Values, P extends Primitives> {
 }
 
 export class Formulier<V extends Values = Values, P extends Primitives = Primitives> {
-	notifyEnabled: boolean
-	listeners: Set<FormListener<V, P>>
-	state: FormulierState<V, P>
+	store: Store<FormulierState<V, P>>
+	instances: Record<string, Set<string>> = {}
 
 	constructor({initialValues}: FormulierOptions<V, P>) {
-		this.notifyEnabled = true
-		this.listeners = new Set()
-		this.state = {
+		this.store = new Store({
 			values: initialValues,
 			validators: {},
 			errors: {},
 			touched: {},
 			submitCount: 0,
-		} as FormulierState<V, P>
+		})
+	}
 
-		this.getState = this.getState.bind(this)
-		this.subscribe = this.subscribe.bind(this)
+	setFieldErrors = (fieldErrors: FormulierState<V, P>['errors']): void => {
+		this.store.batch(() => {
+			this.store.setState(state => ({...state, errors: {}}))
+			for (const [name, error] of Object.entries(fieldErrors)) {
+				this.store.setState(state => ({...state, errors: setKey(state.errors, name, error)}))
+			}
+		})
 	}
 
-	getState(): FormulierState<V, P> {
-		return this.state
+	validateFields = (): boolean => {
+		const {validators, values} = this.store.getState()
+		const fieldErrors = Object.fromEntries(
+			Object.entries(validators).map(([name, validate]) => {
+				const value = getPath(values, name, null)
+				const error = validate?.(value) || null
+				return [name, error]
+			}),
+		)
+		this.setFieldErrors(fieldErrors)
+		const noErrors = Object.values(this.store.getState().errors).every(value => value == null)
+		return noErrors
 	}
 
-	subscribe(listener: FormListener<V, P>): () => void {
-		this.listeners.add(listener)
+	validateField = (name: string): boolean => {
+		const {validators, values} = this.store.getState()
+		const validate = validators[name]
+		const value = getPath(values, name, null)
+		const error = validate?.(value) || null
+		this.store.setState(state => ({...state, errors: setKey(state.errors, name, error)}))
+		return !!validate && !error
+	}
+
+	registerField = (name: string, validate: FieldValidator | undefined): (() => void) => {
+		this.store.setState(state => ({
+			...state,
+			values: setPath(state.values, name, getPath(state.values, name, null)),
+			validators: setKey(state.validators, name, validate || null),
+			errors: state.errors[name] === undefined ? setKey(state.errors, name, null) : state.errors,
+			touched: state.touched[name] === undefined ? setKey(state.touched, name, false) : state.touched,
+		}))
 		return () => {
-			this.listeners.delete(listener)
+			this.store.setState(state => ({
+				...state,
+				values: setPath(state.values, name, undefined),
+				validators: removeKey(state.validators, name),
+				errors: removeKey(state.errors, name),
+				touched: removeKey(state.touched, name),
+			}))
 		}
 	}
 
-	notify(): void {
-		if (this.notifyEnabled === false) return
-		const state = this.getState()
-		this.listeners.forEach(listener => listener(state))
+	addInstance = (name: string, instanceId: string): (() => void) => {
+		this.instances[name] ||= new Set()
+		this.instances[name].add(instanceId)
+		return () => {
+			this.instances[name]?.delete(instanceId)
+		}
 	}
 
-	validateFields(): boolean {
-		this.state = {...this.state, errors: {}}
-		Object.entries(this.state.validators).forEach(([name, validate]) => {
-			const value = getPath(this.state.values, name, null)
-			const error = validate?.(value) || null
-			this.state = {...this.state, errors: setKey(this.state.errors, name, error)}
-		})
-		this.notify()
-		const noErrors = !Object.values(this.state.errors).some(value => value !== null)
-		return noErrors
+	hasInstance = (name: string): boolean => {
+		return !!this.instances[name]?.size
 	}
 
-	validateField(name: string): boolean {
-		const validate = this.state.validators[name]
-		const value = getPath(this.state.values, name, null)
-		const error = validate?.(value) || null
-		this.state = {...this.state, errors: setKey(this.state.errors, name, error)}
-		this.notify()
-		return !!validate && !error
+	setFieldValue = (name: string, value: unknown): void => {
+		const {values} = this.store.getState()
+		if (isEqual(getPath(values, name), value)) return
+		this.store.setState(state => ({...state, values: setPath(state.values, name, value)}))
 	}
 
-	registerField(name: string, validate: FieldValidator | undefined): void {
-		const value = getPath(this.state.values, name, null)
-		const errors = this.state.errors[name]
-		const touched = this.state.touched[name]
-		this.state = {
-			...this.state,
-			values: setPath(this.state.values, name, value),
-			validators: setKey(this.state.validators, name, validate || null),
-		}
-		if (errors === undefined) {
-			this.state = {...this.state, errors: setKey(this.state.errors, name, null)}
-		}
-		if (touched === undefined) {
-			this.state = {...this.state, touched: setKey(this.state.touched, name, false)}
-		}
-		this.notify()
+	touchField = (name: string, value = true): void => {
+		const {touched} = this.store.getState()
+		if (touched[name] === value) return
+		this.store.setState(state => ({...state, touched: setKey(state.touched, name, value)}))
 	}
 
-	unregisterField(name: string): void {
-		this.state = {
-			...this.state,
-			values: setPath(this.state.values, name, undefined),
-			validators: removeKey(this.state.validators, name),
-			errors: removeKey(this.state.errors, name),
-			touched: removeKey(this.state.touched, name),
-		}
-		this.notify()
+	incrementSubmitCount = (): void => {
+		this.store.setState(state => ({...state, submitCount: state.submitCount + 1}))
 	}
+}
 
-	setFieldValue(name: string, value: unknown): void {
-		if (isEqual(getPath(this.state.values, name), value)) return
-		this.state = {
-			...this.state,
-			values: setPath(this.state.values, name, value),
-		}
-		this.notify()
+class Store<S> {
+	private batching = false
+	private flushing = 0
+	private listeners = new Set<(state: S) => void>()
+	private state: S
+
+	constructor(state: S) {
+		this.state = state
 	}
 
-	touchField(name: string, touched = true): void {
-		if (this.state.touched[name] === touched) return
-		this.state = {
-			...this.state,
-			touched: setKey(this.state.touched, name, touched),
-		}
-		this.notify()
+	getState = (): S => {
+		return this.state
 	}
 
-	incrementSubmitCount(): void {
-		this.state = {
-			...this.state,
-			submitCount: this.state.submitCount + 1,
+	setState = (updater: (previous: S) => S): void => {
+		this.state = updater(this.state)
+		this.flush()
+	}
+
+	subscribe = (listener: (state: S) => void): (() => void) => {
+		this.listeners.add(listener)
+		return () => {
+			this.listeners.delete(listener)
 		}
-		this.notify()
 	}
 
-	withoutNotify(callback: CallableFunction): void {
-		this.notifyEnabled = false
+	batch = (callback: () => void): void => {
+		if (this.batching === true) return void callback()
+		this.batching = true
 		callback()
-		this.notifyEnabled = true
+		this.batching = false
+		this.flush()
+	}
+
+	private flush = (): void => {
+		if (this.batching === true) return
+		const state = this.getState()
+		const flushId = ++this.flushing
+		for (const listener of this.listeners) {
+			if (this.flushing !== flushId) continue
+			listener(state)
+		}
 	}
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index ad4479b..73ff7c0 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -20,10 +20,6 @@ export interface FormulierState<V extends Values, P extends Primitives = Primiti
 	submitCount: number
 }
 
-export interface FormListener<V extends Values = Values, P extends Primitives = Primitives> {
-	(state: FormulierState<V, P>): void
-}
-
 export type GetFieldType<T, P extends string> = string extends P
 	? any
 	: P extends `${infer Left}.${infer Right}`
diff --git a/packages/core/tests/form.test.ts b/packages/core/tests/form.test.ts
index 28ee01e..12485fe 100644
--- a/packages/core/tests/form.test.ts
+++ b/packages/core/tests/form.test.ts
@@ -6,13 +6,13 @@ const INITIAL_VALUES = {a: {b: {c: 'c', d: 'd'}}}
 
 it('copies initial values', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
-	expect(form.getState().values).toBe(INITIAL_VALUES)
+	expect(form.store.getState().values).toBe(INITIAL_VALUES)
 })
 
 it('calls listeners', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const listener = vi.fn(() => undefined)
-	form.subscribe(listener)
+	form.store.subscribe(listener)
 	form.setFieldValue('a.b.c', 'd')
 	expect(listener).toHaveBeenCalledTimes(1)
 })
@@ -20,32 +20,32 @@ it('calls listeners', () => {
 it('removes listeners', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const listener = vi.fn(() => undefined)
-	const cancel = form.subscribe(listener)
+	const cancel = form.store.subscribe(listener)
 	cancel()
 	form.setFieldValue('a.b.c', 'd')
 	expect(listener).toHaveBeenCalledTimes(0)
-	expect(form.listeners.size).toBe(0)
+	expect(form.store['listeners'].size).toBe(0)
 })
 
 it('touches fields', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
-	expect(form.getState().touched['a.b.c']).toBe(undefined)
+	expect(form.store.getState().touched['a.b.c']).toBe(undefined)
 	form.touchField('a.b.c')
-	expect(form.getState().touched['a.b.c']).toBe(true)
+	expect(form.store.getState().touched['a.b.c']).toBe(true)
 })
 
 it('increments submit count', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
-	expect(form.getState().submitCount).toBe(0)
+	expect(form.store.getState().submitCount).toBe(0)
 	form.incrementSubmitCount()
 	form.incrementSubmitCount()
-	expect(form.getState().submitCount).toBe(2)
+	expect(form.store.getState().submitCount).toBe(2)
 })
 
 it('should not call listeners if setFieldValue does nothing', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const listener = vi.fn(() => undefined)
-	form.subscribe(listener)
+	form.store.subscribe(listener)
 	expect(listener).toHaveBeenCalledTimes(0)
 	form.setFieldValue('a.b.c', 'd')
 	expect(listener).toHaveBeenCalledTimes(1)
@@ -56,7 +56,7 @@ it('should not call listeners if setFieldValue does nothing', () => {
 it('should not call listeners if touchField does nothing', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const listener = vi.fn(() => undefined)
-	form.subscribe(listener)
+	form.store.subscribe(listener)
 	expect(listener).toHaveBeenCalledTimes(0)
 	form.touchField('a.b.c')
 	expect(listener).toHaveBeenCalledTimes(1)
@@ -67,30 +67,30 @@ it('should not call listeners if touchField does nothing', () => {
 it('registers and unregisters fields', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const validator = () => null
-	expect((form.getState().values as any).b).toBe(undefined)
-	expect(form.getState().touched['b']).toBe(undefined)
-	expect(form.getState().errors['b']).toBe(undefined)
-	expect(form.getState().validators['b']).toBe(undefined)
-	form.registerField('b', validator)
-	form.registerField('c', undefined)
-	expect((form.getState().values as any).b).toBe(null)
-	expect(form.getState().touched['b']).toBe(false)
-	expect(form.getState().errors['b']).toBe(null)
-	expect(form.getState().validators['b']).toBe(validator)
-	expect(form.getState().validators['c']).toBe(null)
+	expect((form.store.getState().values as any).b).toBe(undefined)
+	expect(form.store.getState().touched['b']).toBe(undefined)
+	expect(form.store.getState().errors['b']).toBe(undefined)
+	expect(form.store.getState().validators['b']).toBe(undefined)
+	const unregisterB = form.registerField('b', validator)
+	const unregisterC = form.registerField('c', undefined)
+	expect((form.store.getState().values as any).b).toBe(null)
+	expect(form.store.getState().touched['b']).toBe(false)
+	expect(form.store.getState().errors['b']).toBe(null)
+	expect(form.store.getState().validators['b']).toBe(validator)
+	expect(form.store.getState().validators['c']).toBe(null)
 	form.setFieldValue('b', 'value')
 	form.setFieldValue('c', 'value')
-	expect(getPath(form.getState().values, 'b')).toBe('value')
+	expect(getPath(form.store.getState().values, 'b')).toBe('value')
 	form.registerField('b', validator)
 	form.registerField('c', undefined)
-	expect(getPath(form.getState().values, 'b')).toBe('value')
-	form.unregisterField('b')
-	form.unregisterField('c')
-	expect((form.getState().values as any).b).toBe(undefined)
-	expect(form.getState().touched['b']).toBe(undefined)
-	expect(form.getState().errors['b']).toBe(undefined)
-	expect(form.getState().validators['b']).toBe(undefined)
-	expect(form.getState().validators['c']).toBe(undefined)
+	expect(getPath(form.store.getState().values, 'b')).toBe('value')
+	unregisterB()
+	unregisterC()
+	expect((form.store.getState().values as any).b).toBe(undefined)
+	expect(form.store.getState().touched['b']).toBe(undefined)
+	expect(form.store.getState().errors['b']).toBe(undefined)
+	expect(form.store.getState().validators['b']).toBe(undefined)
+	expect(form.store.getState().validators['c']).toBe(undefined)
 })
 
 it('validates field', () => {
@@ -98,10 +98,10 @@ it('validates field', () => {
 	const validator = (value: unknown) => (value === 1 ? null : 'Error!')
 	form.registerField('a.b.c', validator)
 	expect(form.validateField('a.b.c')).toBe(false)
-	expect(form.getState().errors['a.b.c']).toBe('Error!')
+	expect(form.store.getState().errors['a.b.c']).toBe('Error!')
 	form.setFieldValue('a.b.c', 1)
 	expect(form.validateField('a.b.c')).toBe(true)
-	expect(form.getState().errors['a.b.c']).toBe(null)
+	expect(form.store.getState().errors['a.b.c']).toBe(null)
 })
 
 it('validates fields', () => {
@@ -111,22 +111,25 @@ it('validates fields', () => {
 	form.registerField('a.b.d', validator)
 	form.setFieldValue('a.b.c', 1)
 	expect(form.validateFields()).toBe(false)
-	expect(form.getState().errors['a.b.c']).toBe(null)
-	expect(form.getState().errors['a.b.d']).toBe('Error!')
+	expect(form.store.getState().errors['a.b.c']).toBe(null)
+	expect(form.store.getState().errors['a.b.d']).toBe('Error!')
 	form.setFieldValue('a.b.d', 1)
 	expect(form.validateFields()).toBe(true)
-	expect(form.getState().errors['a.b.c']).toBe(null)
-	expect(form.getState().errors['a.b.d']).toBe(null)
+	expect(form.store.getState().errors['a.b.c']).toBe(null)
+	expect(form.store.getState().errors['a.b.d']).toBe(null)
 })
 
-it('skips calling listeners', () => {
+it('skips calling listeners when batching', () => {
 	const form = new Formulier({initialValues: INITIAL_VALUES})
 	const listener = vi.fn(() => undefined)
-	form.subscribe(listener)
-	form.notify()
-	expect(listener).toHaveBeenCalledTimes(1)
-	form.withoutNotify(() => {
-		form.notify()
+	form.store.subscribe(listener)
+	expect(listener).toHaveBeenCalledTimes(0)
+	form.store.setState(state => ({...state, errors: {'a.b.c': 'Error 1'}}))
+	form.store.setState(state => ({...state, errors: {'a.b.c': 'Error 2'}}))
+	expect(listener).toHaveBeenCalledTimes(2)
+	form.store.batch(() => {
+		form.store.setState(state => ({...state, errors: {'a.b.c': 'Error 3'}}))
+		form.store.setState(state => ({...state, errors: {'a.b.c': 'Error 4'}}))
 	})
-	expect(listener).toHaveBeenCalledTimes(1)
+	expect(listener).toHaveBeenCalledTimes(3)
 })
diff --git a/packages/react/package.json b/packages/react/package.json
index e6d4c38..e43c7c1 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -66,6 +66,7 @@
 		"@formulier/tsconfig": "workspace:0.0.0",
 		"@testing-library/react": "^14.1.2",
 		"@types/react": "^18.2.46",
+		"@types/react-dom": "^18.2.18",
 		"@types/shallow-clone": "^3.0.2",
 		"@types/use-sync-external-store": "^0.0.6",
 		"@vitest/coverage-istanbul": "^1.1.3",
diff --git a/packages/react/src/use-event.ts b/packages/react/src/use-event.ts
index c81ee9c..f1ae172 100644
--- a/packages/react/src/use-event.ts
+++ b/packages/react/src/use-event.ts
@@ -2,9 +2,7 @@ import * as React from 'react'
 
 export function useEvent<Handler extends CallableFunction>(handler: Handler) {
 	const handlerRef = React.useRef(handler)
-	React.useEffect(() => {
-		handlerRef.current = handler
-	})
+	handlerRef.current = handler
 	return React.useCallback((...args: any[]) => {
 		const fn = handlerRef.current
 		return fn(...args)
diff --git a/packages/react/src/use-form-field.ts b/packages/react/src/use-form-field.ts
index 590c4ec..d5026a6 100644
--- a/packages/react/src/use-form-field.ts
+++ b/packages/react/src/use-form-field.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import {FieldValidator, Formulier, GetFieldType, Primitives, Values, stateUtils} from '@formulier/core'
+import * as ReactDOM from 'react-dom'
+import {FieldValidator, Formulier, GetFieldType, Primitives, Values} from '@formulier/core'
 import {FormFieldValueOptions, useFormFieldValue} from './use-form-field-value'
 import {useEvent} from './use-event'
 import {useFormSelector} from './use-form-selector'
@@ -8,12 +9,15 @@ export interface FieldOptions<V extends Values, F extends string> {
 	name: F
 	validate?: FieldValidator
 	valueOptions?: FormFieldValueOptions<V, F>
+	flushSyncOnChange?: boolean
+	flushSyncOnBlur?: boolean
 }
 
 export type UseFormFieldResult<V extends Values, F extends string> = [FieldInputProps<V, F>, FieldMeta]
 
 export interface FieldInputProps<V extends Values, F extends string> {
 	id: string
+	name: string
 	value: GetFieldType<V, F> | null | undefined
 	onChange: (value: GetFieldType<V, F> | null | undefined) => void
 	onBlur: () => void
@@ -24,48 +28,51 @@ export interface FieldMeta {
 	touched: boolean
 }
 
-type StateBeforeCleanup = {name: string; value: any} | undefined
+const callCallback = (cb: CallableFunction) => void cb()
 
 export function useFormField<V extends Values, P extends Primitives, F extends string>(
 	form: Formulier<V, P>,
 	options: FieldOptions<V, F>,
 ): UseFormFieldResult<V, F> {
-	const {name, validate, valueOptions} = options
-	const id = name
+	const id = React.useId()
+	const rerender = React.useReducer(x => x + 1, 0)[1]
+	const {name, validate, valueOptions, flushSyncOnChange = false, flushSyncOnBlur = false} = options
 
 	const value = useFormFieldValue(form, name, valueOptions)
 	const error = useFormSelector(form, state => state.errors[name]) || null
 	const touched = useFormSelector(form, state => state.touched[name]) ?? false
 	const hasSubmitted = useFormSelector(form, state => state.submitCount > 0)
 
-	const stateBeforeCleanupRef = React.useRef<StateBeforeCleanup>(undefined)
-
 	React.useEffect(() => {
-		form.registerField(name, validate)
-
-		const state = stateBeforeCleanupRef.current
-		if (state !== undefined && state.value !== undefined && state.name === name) {
-			form.setFieldValue(state.name, state.value)
-		}
+		const unregisterField = form.registerField(name, validate)
+		const removeInstance = form.addInstance(name, id)
 
 		return () => {
-			const value = stateUtils.getPath(form.getState().values, name)
-			stateBeforeCleanupRef.current = {name, value}
-			form.unregisterField(name)
+			removeInstance()
+			queueMicrotask(() => {
+				ReactDOM.flushSync(rerender)
+				if (!form.hasInstance(name)) unregisterField()
+			})
 		}
-	}, [form, name, validate])
+	}, [form, name, id, validate, rerender])
 
 	const onChange = useEvent((value: any) => {
-		form.setFieldValue(name, value)
-		if (touched || hasSubmitted) form.validateField(name)
+		const maybeFlushSync = flushSyncOnChange ? ReactDOM.flushSync : callCallback
+		maybeFlushSync(() => {
+			form.setFieldValue(name, value)
+			if (touched || hasSubmitted) form.validateField(name)
+		})
 	})
 
 	const onBlur = useEvent(() => {
-		form.validateField(name)
-		form.touchField(name)
+		const maybeFlushSync = flushSyncOnBlur ? ReactDOM.flushSync : callCallback
+		maybeFlushSync(() => {
+			form.validateField(name)
+			form.touchField(name)
+		})
 	})
 
-	const field: FieldInputProps<V, F> = {id, value, onChange, onBlur}
+	const field: FieldInputProps<V, F> = {id, name, value, onChange, onBlur}
 	const meta: FieldMeta = {error, touched}
 
 	return [field, meta]
diff --git a/packages/react/src/use-form-selector.ts b/packages/react/src/use-form-selector.ts
index 057ed91..099261e 100644
--- a/packages/react/src/use-form-selector.ts
+++ b/packages/react/src/use-form-selector.ts
@@ -10,5 +10,11 @@ export function useFormSelector<V extends Values, P extends Primitives, Result>(
 	selector: Selector<V, P, Result>,
 	equalityFn?: (a: Result, b: Result) => boolean,
 ) {
-	return useSyncExternalStoreWithSelector(form.subscribe, form.getState, form.getState, selector, equalityFn)
+	return useSyncExternalStoreWithSelector(
+		form.store.subscribe,
+		form.store.getState,
+		form.store.getState,
+		selector,
+		equalityFn,
+	)
 }
diff --git a/packages/react/src/use-submit-handler.tsx b/packages/react/src/use-submit-handler.tsx
index a6a4610..ee498ab 100644
--- a/packages/react/src/use-submit-handler.tsx
+++ b/packages/react/src/use-submit-handler.tsx
@@ -10,7 +10,7 @@ export function useSubmitHandler<V extends Values, P extends Primitives>(
 
 		const valid = form.validateFields()
 		if (valid) {
-			onSubmit(form.getState().values as V)
+			onSubmit(form.store.getState().values as V)
 		}
 
 		form.incrementSubmitCount()
diff --git a/packages/react/tests/use-create-form.test.ts b/packages/react/tests/use-create-form.test.ts
index 4e4d2bb..45d6565 100644
--- a/packages/react/tests/use-create-form.test.ts
+++ b/packages/react/tests/use-create-form.test.ts
@@ -7,21 +7,28 @@ interface FormState {
 	a: {b: {c: string; d: string}}
 }
 
-const {result} = renderHook(() => useCreateForm<FormState>({initialValues: {a: {b: {c: 'c', d: 'd'}}}}))
+const microtask = () => new Promise<void>(resolve => queueMicrotask(resolve))
+
+const {result: form} = renderHook(() => useCreateForm<FormState>({initialValues: {a: {b: {c: 'c', d: 'd'}}}}))
 
 it('renders hook', () => {
-	expect(result.current.getState).toBeDefined()
+	expect(form.current.store.getState).toBeDefined()
 })
 
-it('unregisters field values when unmounted', () => {
-	const {rerender: fieldRerender, unmount: fieldUnmount} = renderHook(
-		options => useFormField(result.current, options),
-		{initialProps: {name: 'a.b.c'}},
-	)
-	expect(result.current.getState().values.a.b.c).toBe('c')
-	fieldRerender({name: 'a.b.d'})
-	expect(result.current.getState().values.a.b.c).toBe(undefined)
-	expect(result.current.getState().values.a.b.d).toBe('d')
-	fieldUnmount()
-	expect(result.current.getState().values.a.b.d).toBe(undefined)
+it('unregisters field values when unmounted', async () => {
+	const {
+		result: field,
+		rerender: rerenderField,
+		unmount: unmountField,
+	} = renderHook(options => useFormField(form.current, options), {
+		initialProps: {name: 'a.b.c'},
+	})
+	expect(field.current[0].value).toBe('c')
+	rerenderField({name: 'a.b.d'})
+	await microtask()
+	expect(form.current.store.getState().values.a.b.c).toBe(undefined)
+	expect(field.current[0].value).toBe('d')
+	unmountField()
+	await microtask()
+	expect(form.current.store.getState().values.a.b.d).toBe(undefined)
 })
diff --git a/packages/react/tests/use-form-field.test.ts b/packages/react/tests/use-form-field.test.ts
index 0eb5882..e57e282 100644
--- a/packages/react/tests/use-form-field.test.ts
+++ b/packages/react/tests/use-form-field.test.ts
@@ -18,7 +18,7 @@ const {result, rerender} = renderHook((options: FieldOptions<FormState, string>)
 })
 
 it('renders hook', () => {
-	expect(result.current[0].id).toBe('a.b.c')
+	expect(result.current[0].name).toBe('a.b.c')
 	expect(result.current[0].value).toBe('c')
 	expect(result.current[1].error).toBe(null)
 	expect(result.current[1].touched).toBe(false)
@@ -47,7 +47,7 @@ it('runs validation during onChange if touched', () => {
 
 it('can change field name', () => {
 	rerender({name: 'a.b.d'})
-	expect(result.current[0].id).toBe('a.b.d')
+	expect(result.current[0].name).toBe('a.b.d')
 	expect(result.current[0].value).toBe('d')
 	expect(result.current[1].error).toBe(null)
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22262eb..4637196 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,6 +165,9 @@ importers:
       '@types/react':
         specifier: ^18.2.46
         version: 18.2.46
+      '@types/react-dom':
+        specifier: ^18.2.18
+        version: 18.2.18
       '@types/shallow-clone':
         specifier: ^3.0.2
         version: 3.0.2