How to type useState with an object.
Nullable, partial, and correct.

import { useState } from 'react';

interface User {
id: string;
name: string;
email: string;
}

function Profile() {
// ─── The common mistake ──────────────────────
// const [user, setUser] = useState(null);
// ↑ user: null — nothing else.
// setUser({ id: '1', name: 'A', email: 'a@x' });
// ❌ Argument of type '{ id: string; ... }' is not assignable
// to parameter of type 'SetStateAction'

// ─── The fix: annotate with a union ──────────
const [user, setUser] = useStatenull>(null);
// user: User | null
// setUser: (u: User | null | ((prev: User | null) => User | null)) => void

function load() {
setUser({ id: '1', name: 'Alice', email: 'a@x.com' }); // ✅
}

function clear() {
setUser(null); // ✅
}

// ─── Accessing requires narrowing ────────────
// return 
{user.name}
;
// ❌ 'user' is possibly 'null'.

if (!user) {
return Load;
}

return (

{user.name}
Clear

);
}

export default Profile;

import { useState } from 'react';

interface Form {
name: string;
email: string;
age: number;
}

function Form() {
const [form, setForm] = useState
({
name: '',
email: '',
age: 0
});

// ─── The bug: mutation doesn't re-render ─────
function badUpdate() {
form.name = 'Alice'; // ❌ mutates — React won't re-render
setForm(form); // same reference → bail out
}

// ─── The fix 1: spread (simple) ──────────────
function updateName(name: string) {
setForm({ ...form, name }); // ✅ new object
}

// ─── The fix 2: functional setter (safest) ───
function updateAge(age: number) {
setForm(prev => ({ ...prev, age })); // ✅ uses latest state
}

// ─── Why functional setter is better ─────────
// If two updates happen in the same tick:
// updateName('X') (closure captures old form)
// updateAge(30) (closure captures old form)
// Both spread from the same stale form — one update is lost.
//
// With functional setter:
// setForm(prev => ({ ...prev, name: 'X' }))
// setForm(prev => ({ ...prev, age: 30 }))
// Each receives the LATEST state — no lost update.

// ─── Nested object update ────────────────────
interface Profile {
name: string;
address: { city: string; zip: string };
}

const [profile, setProfile] = useState({
name: 'Alice',
address: { city: 'Springfield', zip: '12345' }
});

function updateCity(city: string) {
setProfile(prev => ({
...prev,
address: { ...prev.address, city } // spread every level
}));
}

return (

 updateName(e.target.value)} />
"number" value={form.age} onChange={e => updateAge(Number(e.target.value))} />
 updateCity(e.target.value)} />

);
}

export default Form;

import { useState } from 'react';

interface Form {
name: string;
email: string;
age: number;
}

function Form() {
const [form, setForm] = useState({
name: '',
email: '',
age: 0
});

// ─── Typed field updater ─────────────────────
function updateFieldextends keyof Form>(key: K, value: Form[K]) {
setForm(prev => ({ ...prev, [key]: value }));
}

// ─── Type-safe usage ─────────────────────────
updateField('name', 'Alice'); // ✅ K='name', value=string
updateField('age', 30); // ✅ K='age', value=number
// updateField('name', 30); // ❌ value must be string for 'name'
// updateField('nope', 'x'); // ❌ 'nope' not a key of Form

// ─── One updater handles every field ─────────
return (

 updateField('name', e.target.value)}
/>
 updateField('email', e.target.value)}
/>
"number"
value={form.age}
onChange={e => updateField('age', Number(e.target.value))}
/>

);
}

// ─── Extract the helper for reuse ────────────
// Pull this into a custom hook:
//
// function useObjectState(init: T) {
// const [state, setState] = useState(init);
// function update(key: K, value: T[K]) {
// setState(prev => ({ ...prev, [key]: value }));
// }
// return [state, update, setState] as const;
// }
//
// Usage:
// const [form, updateField] = useObjectState({
// name: '', email: '', age: 0
// });

export default Form;