?status=active             <- URL nói active
filters.status = inactive  <- React local nói inactive
props.filters.status=all   <- server props nói all

State có quyết định business truth?
  YES -> server/DB
  NO
   |
Có cần copy URL để share/bookmark/reload?
  YES -> URL
  NO
   |
Có phải field đang edit/submit?
  YES -> useForm
  NO
   |
Có cần sống qua browser Back/Forward?
  YES -> useRemember hoặc keyed useForm
  NO
   |
Chỉ điều khiển UI ngắn hạn?
  YES -> local state
  NO
   |
Request JSON độc lập khỏi page lifecycle?
  YES -> useHttp/local request state

export default function Index({ products }: Props) {
    const [rows, setRows] = useState(products.data)

    return rows.map(/* ... */)
}

router.reload({ only: ['products'] })

export default function Index({ products }: Props) {
    return products.data.map((product) => (
        <ProductRow product={product} key={product.id} />
    ))
}

const [draftOrder, setDraftOrder] = useState(() => products.data)

function resetDraft() {
    setDraftOrder(products.data)
}

function saveOrder() {
    router.put(route('products.reorder'), {
        ids: draftOrder.map((item) => item.id),
    })
}

/products?search=keyboard&status=active&sort=-price&page=2

public function index(Request $request)
{
    $filters = $request->validate([
        'search' => ['nullable', 'string', 'max:100'],
        'status' => ['nullable', Rule::in(['active', 'inactive'])],
        'sort' => ['nullable', Rule::in(['name', '-name', 'price', '-price'])],
        'page' => ['nullable', 'integer', 'min:1'],
    ]);

    return Inertia::render('Products/Index', [
        'filters' => $filters,
        'products' => fn () => $this->query($filters)->paginate(20)->withQueryString(),
    ]);
}

const [searchDraft, setSearchDraft] = useState(filters.search ?? '')

function commitSearch(search: string) {
    router.get(
        route('products.index'),
        {
            ...filters,
            search: search || undefined,
            page: undefined,
        },
        {
            only: ['products', 'filters'],
            preserveState: true,
            replace: true,
        },
    )
}

searchDraft -> local typing buffer
filters.search -> committed URL/server state

/products/42?tab=inventory

const [panel, setPanel] = useState<'details' | 'help'>('details')

product.name === 'Keyboard'

const form = useForm(`EditProduct:${product.id}`, {
    name: product.name,
    price: product.price,
})

server product.name = Keyboard
form.data.name       = Mechanical Keyboard

useEffect(() => {
    form.setData('name', product.name)
}, [product.name])

const form = useForm(`EditProduct:${product.id}`, {
    name: product.name,
    price: product.price,
})

Page A -> user nhập draft -> Page B -> Back -> draft được phục hồi

const [ui, setUi] = useRemember(
    {
        expandedFilters: false,
        selectedIds: [] as number[],
    },
    'Products/Index:UI',
)

'auth.user' => fn () => $request->user()?->only('id', 'name'),
'locale' => app()->getLocale(),
'flash.success' => fn () => session('success'),

'products' => Product::all(),
'permissions' => Permission::all(),
'notificationHistory' => Notification::latest()->get(),

const [activeCount, setActiveCount] = useState(0)

useEffect(() => {
    setActiveCount(products.data.filter((p) => p.is_active).length)
}, [products])

const activeCount = products.data.filter((p) => p.is_active).length

'stats' => Inertia::defer(fn () => [
    'active' => Product::where('is_active', true)->count(),
]),

router.patch(
    route('products.toggle', product.id),
    {},
    {
        optimistic: {
            props: (current) => ({
                products: toggleProduct(current.products, product.id),
            }),
        },
        onSuccess: () => router.reload({ only: ['stats'] }),
    },
)

Canonical: DB
Projection: optimistic page props
Failure: rollback projection
Success: reconcile canonical props

const [deleting, setDeleting] = useState<Product | null>(null)

'editingProduct' => fn () => $request->integer('edit')
    ? Product::findOrFail($request->integer('edit'))
    : null,

page=3 -> URL
selectedIds=[3,5,8] -> local/history tùy UX

return [
    'id' => $this->id,
    'name' => $this->name,
    'can' => [
        'update' => $request->user()->can('update', $this->resource),
        'delete' => $request->user()->can('delete', $this->resource),
    ],
];

{product.can.update && <EditButton />}

form.errors.name

Error page / server response

router event / request lifecycle feedback

useHttp instance

Request A: search=a   (chậm)
Request B: search=ab  (nhanh)

const [status, setStatus] = useState(filters.status)

useEffect(() => {
    router.get(route('products.index'), { status })
}, [status])

useEffect(() => {
    setStatus(filters.status)
}, [filters.status])

function changeStatus(status: string) {
    router.get(
        route('products.index'),
        { ...filters, status, page: undefined },
        { preserveState: true, replace: true },
    )
}

products                 -> server props
stats                    -> deferred server props
filters.search           -> URL/server
searchDraft              -> local transient draft
filters.status/sort/page -> URL/server
selectedIds              -> local UI hoặc remembered UI
isFilterPanelOpen        -> local UI
flash.success            -> shared ephemeral server message
toggle optimistic state  -> temporary projection

product.image_url        -> server prop/current persisted image
form.data.image          -> local form draft File
previewUrl               -> derived local object URL
form.progress            -> upload operation state
form.errors.image        -> server validation state projected vào form
remove_image             -> form intent gửi server

DB/server truth
    ↕ explicit sync
client domain store
    ↕
Inertia page/navigation shell

[ ] Mỗi state có canonical owner rõ chưa?
[ ] Có mirror server prop vào useState không cần thiết không?
[ ] URL có thiếu search/filter/sort/page cần bookmark không?
[ ] Form draft có bị prop refresh overwrite không?
[ ] useRemember có đang bị dùng như data cache không?
[ ] Shared props có trở thành global dump không?
[ ] Derived state có bị lưu thành state riêng không?
[ ] Optimistic projection có rollback/reconcile không?
[ ] Loading/error có scope đúng operation không?
[ ] Back/Forward có phục hồi đúng thứ user kỳ vọng không?
[ ] Có effect nào chỉ tồn tại để sync hai bản copy cùng một dữ liệu không?

useEffect(() => setX(props.x), [props.x])
useEffect(() => navigateFromX(x), [x])

user intent
 -> URL/form/local event
 -> server mutation/query
 -> Inertia response
 -> props render