React & Next.js

Ôn React 19 và Next.js 16 ở mức tech lead fullstack: cơ chế bên dưới, số đo thật từ lab, bẫy hay gặp và khi nào không nên dùng. Nên đọc theo thứ tự.

1 · Render

Cơ chế render — Fiber, reconciliation, batching, concurrent rendering

Hai pha render/commit, lane nào ngắt được lane nào (DefaultLane không ngắt được transition), key bằng index làm state dính sai dòng, useTransition đo thật.

 2 · Hooks

Hooks sâu — closure, dependency, Strict Mode, React Compiler

Mỗi render là một snapshot, stale closure, object trong deps (sự cố Cloudflare 9/2025), Strict Mode dev/prod, React Compiler 1.0 bỏ memo khi scope vắt qua hook.

 3 · State

State và data fetching — Context, store, TanStack Query, race condition, tearing

Phân loại 5 loại state, Context 200 render vs selector 0, race condition khi fetch, query key thiếu tham số, optimistic rollback, tearing tái hiện được.

 4 · SSR/RSC

Performance, SSR, hydration và Server Components — Next.js 16

Streaming SSR, hydration mismatch, lộ passwordHash qua props, Server Action gọi được không cần đăng nhập, 'use cache' + PPR, gzip của nginx làm mất streaming.