Frontend & giao diện
20 bài viết gắn thẻ #react trên DiCodeWeb, từ nền tảng đến production, mới nhất trước.
20 bàiCập nhật 8 thg 9, 2026
Khi phần tử native không còn đủ, ARIA là một bản hợp đồng bạn phải giữ. Accessibility tree và cách tính accessible name, roving tabindex hay aria-activedescendant, dựng combobox và tabs từng bước, live region thực sự lên tiếng, focus khi đổi route và cách kiểm thử tất cả.
Dữ liệu từ server không thuộc về bạn — bạn chỉ giữ một bản sao có hạn dùng. Bài này đi sâu TanStack Query v5 theo góc nhìn cache: thiết kế query key, staleTime và gcTime, invalidation, optimistic update có rollback, Suspense, hydration với Next.js App Router, infinite query và khi nào không nên dùng nó.
"use client" không đánh dấu loại component mà đánh dấu điểm bắt đầu của client graph. Bài này dựng lại mô hình tư duy cho RSC trong Next.js 16: thứ gì đi qua ranh giới, data fetching đặt ở đâu, waterfall, streaming và những lỗi khiến bundle phình hoặc lộ dữ liệu.
Hook headless với prop getter, compound component dùng context, asChild và render prop, useControllableState cho controlled và uncontrolled, bàn phím và ARIA như một phần của API, cái giá của polymorphism trong TypeScript, và khi nào nên dùng Radix, React Aria hay Base UI thay vì tự viết.
Next.js 16 bỏ kiểu cache ngầm của App Router cũ: mọi thứ dynamic theo mặc định, bạn tự chọn chỗ cần cache bằng use cache. Bài này đi qua static shell và dynamic hole, cache key, cacheLife, cacheTag với updateTag, revalidateTag, refresh, và một trang sản phẩm e-commerce làm từ đầu đến cuối.
Tool calling thật ra là một vòng lặp do code của bạn điều khiển. Bài này đi qua cách định nghĩa tool bằng schema, agent loop có giới hạn bước, xử lý args sai, message list với part có kiểu, stream args dở dang, render tool call thành component và bắt người dùng xác nhận trước những tool có side effect.
Cơ chế snapshot và cây pseudo-element của View Transitions, startViewTransition trong SPA, transition giữa hai document, view-transition-name, view-transition-class và types, shared element từ danh sách sang trang chi tiết, reduced motion, những bẫy hiệu năng, và cách dùng component ViewTransition của React trong Next.js 16.
Phần frontend mà các tutorial chat AI hay bỏ qua: chọn transport, tự parse SSE với event bị cắt giữa chunk, Route Handler giữ API key và huỷ ngược lên upstream, state theo message parts, gom render theo requestAnimationFrame, markdown tăng dần an toàn, autoscroll, accessibility và xử lý lỗi.
Một ô gợi ý tìm kiếm trông đơn giản nhưng gom đủ mọi bài toán khó của frontend: race condition, debounce, cache, trạng thái không nhấp nháy, WAI-ARIA combobox, gõ tiếng Việt bằng IME và cách test. Bài này xây từng phần bằng React + TypeScript.
Cách mình thiết kế và xây UI cho những tính năng mà mỗi lần chạy lại ra một kết quả khác: ngân sách độ trễ và streaming, gợi ý có thể chấp nhận, sửa hoặc bỏ qua với state model có type, undo và preview, nguồn trích dẫn trung thực, feedback nối vào analytics, xử lý lỗi và accessibility.
Hiểu đúng mô hình event loop của trình duyệt — task, microtask, khung hình — qua các bài đoán thứ tự output, rồi dùng nó để giải thích vì sao UI bị đơ và cách chia nhỏ, nhường main thread, đẩy việc sang Web Worker.
React escape giúp bạn rất nhiều, nhưng không phải tất cả. Bài này đi qua những lỗ hổng XSS vẫn lọt qua React, cách dựng CSP nghiêm ngặt bằng nonce trong Next.js, Trusted Types, CSRF thời SameSite, chuyện lưu token ở đâu và cách chặn clickjacking.
Tự tay viết một virtual list bằng React + TypeScript: toán windowing với số liệu cụ thể, overscan, chiều cao thay đổi với prefix sum và binary search, đo bằng ResizeObserver, chống giật khi scroll, accessibility — và khi nào không nên virtualize.
React Compiler thực sự làm gì, các Rules of React nó dựa vào, ESLint plugin, rollout từng phần bằng annotation mode và "use no memo", xử lý useMemo/useCallback cũ, cách kiểm chứng nó chạy, các lý do bail out thường gặp, thư viện bên thứ ba và chi phí build.
Signals theo dõi dependency thế nào, vì sao push-pull cho cập nhật không bị glitch, Solid, Preact, Angular và Vue dùng chúng ra sao, đề xuất TC39 đang ở đâu, React Compiler thay đổi được gì, và những cái bẫy khi chạy production — kèm một bản cài đặt signal nhỏ bằng TypeScript.
Hướng dẫn thực tế giúp giảm lượng JavaScript tải ban đầu bằng cách kết hợp lazy loading theo route và theo component.
React 19 đưa form về gần với HTML hơn: prop action, trạng thái pending, cập nhật optimistic và Server Actions. Bài này đi qua cách mình dựng một form đăng ký đầy đủ — validate hai phía, trả lỗi theo field, accessible, và chạy được cả trước khi JavaScript tải xong.
Điều gì khiến component render lại, vì sao re-render không đồng nghĩa với cập nhật DOM, cách đo bằng React DevTools Profiler, chi phí thật của memo/useMemo/useCallback, tách context, đặt state đúng chỗ, key trong danh sách, và React Compiler thay đổi bức tranh thế nào.
Phân loại lỗi trước khi xử lý, hiểu error boundary bắt được gì và không bắt được gì, retry đúng cách với backoff và jitter, tách thông báo cho người dùng khỏi log cho developer, và báo cáo lỗi mà không làm lộ dữ liệu cá nhân.
Vì sao isLoading, isError và data cùng tồn tại là mầm mống của bug, cách mô hình hoá UI bằng trạng thái và sự kiện, một state machine có type bằng useReducer cho luồng submit form, và khi nào nên dùng thư viện statechart.