React 19 · Phần 01 — UI là value, không phải template
Xây mental model đầu tiên: component tạo React element, React giữ UI đồng bộ với state, còn DOM chỉ là output được commit vào browser.
Filter/Tag
#react
36 entries
-
-
TanStack Query · Phần 18 — Kiến trúc production & Migration (Capstone)
Gói 18 phần thành một query layer theo feature: cấu trúc thư mục, quy ước loading/error, devtools & logging cho production, lộ trình migrate v4 → v5, so sánh với RTK Query/SWR, và checklist production-ready.
-
TanStack Query · Phần 17 — Type-safety đỉnh cao
Typing toàn trình từ queryFn tới component: queryOptions & DataTag suy luận type, generic query factory tái dùng, skipToken thay cho enabled, kết hợp zod infer, và xoá sạch as khỏi lớp data.
-
TanStack Query · Phần 16 — Hiệu năng render sâu
Vì sao v5 mặc định tracked queries, tinh chỉnh notifyOnChangeProps, dùng useQueries cho danh sách động, cơ chế structural sharing bên trong và viết structuralSharing tuỳ chỉnh, cùng cách cô lập subscription để chặn re-render thừa.
-
TanStack Query · Phần 15 — Mutation nâng cao
Làm chủ mutation ở mức production: mutationKey & setMutationDefaults, theo dõi mutation đang chạy bằng useMutationState, scope chạy tuần tự, optimistic update trải nhiều query, xử lý toàn cục ở MutationCache và hàng đợi offline.
-
TanStack Query · Phần 14 — Realtime: WebSocket, SSE & cache
Ghép dữ liệu realtime với React Query: đẩy sự kiện vào cache bằng setQueryData thay vì invalidate, quyết định patch vs invalidate, gom sự kiện, một query làm kênh subscription, và cập nhật từng phần an toàn type.
-
TanStack Query · Phần 13 — Offline-first & Persistence sâu
Giữ cache qua reload với persistQueryClient + persister sync/async, kiểm soát buster và maxAge, lọc dữ liệu nhạy cảm khi dehydrate, hàng đợi paused mutations chạy lại khi online, và đồng bộ cache đa tab.
-
TanStack Query · Phần 12 — QueryClient như một store: thao tác cache chủ động
Đọc-ghi cache trực tiếp với getQueryData/setQueryData và bản số nhiều getQueriesData/setQueriesData, invalidate bằng predicate và refetchType, cancelQueries/removeQueries, rồi subscribe vào cache để đồng bộ chéo.
-
TanStack Query · Phần 11 — Prefetching & tích hợp Router nâng cao
Tải data trước theo ý định người dùng: prefetch on hover/focus/viewport, ensureQueryData vs prefetchQuery, prefetchInfiniteQuery, route loader (React Router & TanStack Router) và cách triệt tiêu request waterfall.
-
TanStack Query · Phần 10 — SSR, Next.js App Router & Hydration
Chạy React Query trên server: prefetch rồi truyền cache xuống client bằng dehydrate + HydrationBoundary, dùng QueryClient đúng cách trong React Server Components, và streaming data với gói next-experimental.
-
TanStack Query · Phần 9 — QueryClient & Defaults sâu
Cấu hình QueryClient ở mức senior: defaultOptions cho queries/mutations, QueryCache & MutationCache với onError/onSuccess toàn cục, networkMode, structuralSharing, và setQueryDefaults theo từng nhóm key.
-
TanStack Query · Phần 8 — Testing & Capstone
Test hook query/mutation bằng Vitest + React Testing Library + MSW (mock ở tầng network), kiểm thử optimistic rollback, rồi ghép tất cả thành một feature CRUD hoàn chỉnh.
-
TanStack Query · Phần 7 — Errors, Retry, Suspense & Performance
Cấu hình retry thông minh, ném lỗi lên Error Boundary với throwOnError, dùng useSuspenseQuery cho loading khai báo, và tối ưu hiệu năng với select, structural sharing và prefetching.
-
TanStack Query · Phần 6 — Optimistic Updates & quản lý cache
Cập nhật UI tức thì trước khi server phản hồi với onMutate (cancel + snapshot + patch), tự động rollback khi lỗi, dùng setQueryData/getQueryData và query filters để thao tác cache chính xác.
-
TanStack Query · Phần 5 — Mutations & Invalidation
Ghi dữ liệu (tạo/sửa/xoá) bằng useMutation, hiểu vòng đời onMutate/onSuccess/onError/onSettled, và sau khi ghi thì invalidate đúng query để UI tự đồng bộ với server.
-
TanStack Query · Phần 4 — Pagination & useInfiniteQuery
Chuyển trang mượt không nhấp nháy với placeholderData keepPreviousData, rồi dựng infinite scroll thực thụ bằng useInfiniteQuery với getNextPageParam, fetchNextPage và IntersectionObserver.
-
TanStack Query · Phần 3 — Query keys, zod & queryOptions
Thiết kế query key phân cấp chống gõ sai, viết apiFetch validate dữ liệu tại biên bằng zod để any không lọt vào app, gói query bằng queryOptions tái dùng, và làm dependent/parallel queries.
-
TanStack Query · Phần 2 — useQuery sâu & vòng đời cache
Phân biệt status vs fetchStatus, xử lý đầy đủ loading/error/empty, hiểu chính xác staleTime vs gcTime, các trigger refetch, và đi qua vòng đời một cache entry theo dòng thời gian.
-
Tailwind, Radix & shadcn/ui · Part 8 — Radix Deep: Composition, asChild & State
Go pro with Radix: controlled vs uncontrolled state, the asChild slot pattern to merge behavior onto your own components, and Tabs/Switch/Tooltip/Popover composition — the toolkit before shadcn ties it together. With a live composition lab.
-
TanStack Query · Phần 1 — Mental Model & Cài đặt
Mở màn series: server state là gì và vì sao nó khác client state, vì sao đừng tự viết fetch + useEffect + useState, rồi cài QueryClient + Provider + Devtools và viết useQuery đầu tiên.
-
Tailwind, Radix & shadcn/ui · Part 7 — Radix UI Primitives: Headless & Accessible
The second pillar: why headless components exist, installing Radix, the Root/Trigger/Portal/Content anatomy, and building a fully accessible Dialog and DropdownMenu styled with Tailwind. With a live anatomy + a11y demo.
-
Tailwind, Radix & shadcn/ui · Part 5 — Reusable Components: cn, clsx, tailwind-merge & cva
The moment classes repeat you need components — and the professional toolchain shadcn itself uses: clsx for conditionals, tailwind-merge to resolve conflicts, the cn() helper, and cva for type-safe variants. With a live variant factory.
-
Next.js 16 from Zero to Senior · Part 5 — Client Components & URL State
Use the browser deliberately: when to add "use client", the server-to-client boundary and bundle cost, composition patterns, hydration, and using the URL as state with useRouter, usePathname, and useSearchParams.
-
Next.js 16 from Zero to Senior · Part 2 — Routing Deep Dive
Master App Router routing: dynamic and catch-all segments, route groups, parallel and intercepting routes, layouts vs templates, loading/error/not-found, generateStaticParams, and the async params/searchParams of Next.js 16.
-
SVG from Zero to Senior · Part 14 — SVG in React & JSX
Ship SVG the React way: inline vs SVGR, the JSX attribute gotchas (className, strokeWidth), building typed icon components with props and currentColor, data-driven SVG, and refs for measuring paths. With a live props playground.
-
Next.js 16 from Zero to Senior · Part 1 — Foundations & the App Router
Start Next.js 16 from zero: what the framework really is, install it with Turbopack, understand the App Router file conventions, and grasp the single most important idea — Server Components by default. With exercises.
-
Landing Page Animations — CSS, Vanilla JS, and React + Framer Motion
Senior guide to landing-page motion: page-load orchestration, scroll reveal, stagger, parallax, gestures, and route transitions — with CSS, vanilla JS, and Framer Motion patterns plus library picks.
-
Agent Patterns: ReAct, Reflection & Planning — From One LLM Call to a Production Loop
ReAct, Reflection, and Planning for LLM agents — when to use each, guardrails against runaway loops, and links to tool use and orchestration.
-
React Router v7 — The Remix Merge & Its Three Modes Compared (2026)
A bilingual guide to React Router v7: how Remix merged into it, the three additive modes (Declarative, Data, Framework), type-safe routing, migrating from v6 and Remix v2, and how Framework mode stacks up against Next.js.
-
Deconstructing the Virtual DOM
Why fine-grained reactivity will eventually replace diffing algorithms in modern frameworks — and what that means for the libraries you ship today.
-
SEO ở frontend — deep dive từ robots.txt tới prerender React SPA
Toàn cảnh SEO cho frontend engineer: cách Googlebot crawl & render 2-wave, robots.txt và sitemap, meta/OG/JSON-LD, canonical & hreflang, Web Vitals, spectrum CSR/SSR/SSG/ISR, vì sao SPA React dễ tàng hình và prerender giải quyết ra sao.
-
Placeholders & Skeleton Screens — Why They Matter and How to Build Them Right
A bilingual deep-dive into loading placeholders: why they boost perceived performance and prevent layout shift, the types (spinner, skeleton, LQIP), and how to implement and orchestrate them in vanilla JS and React.
-
Infinite scroll & Virtual scroll — deep dive từ IntersectionObserver tới windowing
Đào sâu cách render danh sách dài: pagination vs infinite scroll vs virtual scroll, sentinel pattern với IntersectionObserver, fixed/variable-height windowing, bidirectional list (chat, feed), và mọi pitfall production.
-
Next.js Core Concepts — From Pages Router to App Router (v14 → v15 → v16)
A comprehensive bilingual guide covering rendering, routing, caching in Next.js across versions 14, 15, and 16. Written in English with inline Vietnamese translations for language learners.
-
TanStack Query (React Query) — The Complete Practical Guide (2026)
A bilingual, hands-on guide to TanStack Query v5: server vs client state, useQuery/useMutation, caching (staleTime vs gcTime), optimistic updates, pagination, strengths, weaknesses, and what you lose without it.
-
Rendering Strategies and React Server Components: Where HTML Gets Built
CSR, SSR, SSG, streaming, islands, and RSC — a principal-level map of where HTML is generated, what hydration costs, and how to choose.