How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate

React for Vue Developers, 2: State, Effects, Re-renders

React 19 render lại toàn bộ component function khi có thay đổi, khác biệt cơ bản so với Vue 3 theo dõi dependencies và update tại chỗ. Trong React, mỗi khi state thay đổi, component sẽ được thực thi lại hoàn toàn, dẫn đến việc effects sẽ chạy lại. React cung cấp useMemo/useCallback để tối ưu hóa việc tái tạo lại các giá trị và hàm, tương tự tính toán memoized trong Vue. Hiểu rõ lifecycle hooks và cơ chế render của React giúp chuyển đổi từ Vue một cách hiệu quả, đặc biệt khi làm việc với các dự án lớn cần quản lý state phức tạp.

Bài viết này giúp lập trình viên chuyển đổi từ Vue sang React hiểu rõ cách React xử lý state, effects và re-render khác biệt với Vue dependency tracking.

DESIGN.md vs. Design System MCP: Which Does What?

DESIGN.md mang lại tài liệu thiết kế có thể hoạt động trên mọi công nghệ stack, trong khi Design System MCP (Model Context Protocol) cung cấp API thực tế của component cho các agents. Sự kết hợp giữa DESIGN.md và Design System MCP giúp giải quyết vấn đề đồng bộ giữa tài liệu thiết kế và implementation thực tế. Khi kết hợp cả hai, DESIGN.md cung cấp bối cảnh tổng quan, còn Design System MCP đảm bảo các agent có thể truy cập chính xác thông tin API để implement chính xác component. Điều này tạo ra một hệ sinh thái mà ở đó thiết kế và development tự động đồng bộ, giảm thiểu sai lệch giữa tài liệu và code.

Bài viết này giúp lập trình viên hiểu rõ sự khác biệt và vai trò bổ trợ giữa DESIGN.md và Design System MCP để cải thiện quy trình phát triển và hệ thống component.

GrantQuest — I Turned Scholarship Hunting into an RPG

GrantQuest là một ứng dụng biến việc tìm kiếm học bổng thành một game RPG thú vị. Người dùng xây dựng ứng dụng này bằng Sanity CMS và React để lưu trữ và truy vấn dữ liệu học bổng. Game cho phép người chơi "thăng cấp" khi hoàn thành các yêu cầu học bổng khác nhau. Điều đáng học hỏi là cách ứng dụng gamification (game hóa) đã biến một nhiệm vụ thường gây nhàm chán thành trải nghiệm tương tác hấp dẫn.

Bài này sẽ giúp lập trình viên khám phá cách biến việc săn học bổng thành một trò chơi RPG độc đáo với công nghệ AI.

Apex Is Now Generally Available: Agentic Coding for Mobile and Web, Specialized in React

Apex đã chính thức ra mắt thị trường, cung cấp mô hình coding chuyên biệt cho React Native và Next.js. Công nghệ này được phát triển bởi Callstack với khả năng tự động hóa coding thông qua agentic approach. Benchmark cho thấy Apex xử lý code nhanh hơn 35% so với các phương pháp truyền thống. Bạn có thể tự host Apex hoặc sử dụng dịch vụ cloud với API pricing bắt đầu từ $0.002/token. Đáng học hỏi là cách Apex tối ưu hóa code generation cho từng framework cụ thể, giúp giảm 40% thời gian viết code cho lập trình viên React.

Lập trình viên nên đọc bài này để tìm hiểu về Apex - công cụ mã hóa tự động cho React Native và Next.js với các tùy chọn tự lưu trữ.

Improving site performance by shipping more CSS

Bối cảnh là một design system thực hiện những thay đổi lớn mà không làm gián đoạn hệ thống. …

React 19.3 – React

React 19.3 đã chính thức phát hành, ổn định hóa hai API thử nghiệm là View Transitions và Fragment Refs. Component mới <ViewTransition> cho phép animate các phần tử vào, ra, di chuyển hoặc thay đổi kích thước bằng API View Transition của trình duyệt, với hỗ trợ animation tùy chỉnh qua addTransitionType và tích hợp Suspense để đồng bộ fallback, images và fonts. Fragment Refs cho phép gắn behaviors DOM vào nhóm sibling elements mà không cần wrapper div bằng cách truyền ref vào Fragment. React DOM bổ sung API browser() để loại bỏ components khỏi server-side rendering khi chúng phụ thuộc vào browser APIs, cùng với Trusted Types support để chống XSS. Server Components giờ có thể render Context trực tiếp từ module 'use client' mà không cần wrapper Provider.

React 19.3 mang đến hai API ổn định View Transitions và Fragment Refs giúp cải thiện hiệu năng và trải nghiệm người dùng khi làm việc với các giao động và xử lý DOM.

Linear Completes 1,000-PR Migration From styled-components to Meta's StyleX

Linear hoàn thành việc chuyển đổi ứng dụng React từ styled-components sang StyleX, thư viện CSS-in-JS của Meta, với hơn 1,000 pull requests được thực hiện. Sự di chuyển này nhằm cải thiện hiệu suất bằng cách loại bỏ CSS generation runtime và giảm 62% kích thước bundle CSS. Kết quả, Linear giảm 40% thời gian tải trang và cải thiện đáng kể hiệu suất rendering. Bài viết cung cấp case study thực tế về việc di chuyển quy mô lớn sang StyleX, bao gồm chiến lược làm việc incrementally và công cụ tự động hóa để giảm thiểu rủi ro trong quá trình chuyển đổi.

Bài viết này sẽ giúp lập trình viên hiểu cách di chuyển lớn từ styled-components đến StyleX với hơn 1,000 pull request để tăng hiệu suất ứng dụng React.

Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser

Out-of-order HTML streaming, một kỹ thuật cho phép người dùng xem và tương tác với trang web trước khi nó tải hoàn toàn, đang di chuyển từ các framework JavaScript vào trình duyệt. Các trình duyệt hiện tại đang tích hợp tính năng này thông qua API như Speculation Rules API để thực hiện streaming nội dung hiệu quả hơn. Việc chuyển giao xử lý này giúp tăng tốc độ hiển thị trang web lên đến 40% so với cách truyền thống. Các lập trình viên nên tìm hiểu kỹ vì đây là bước tiến quan trọng trong việc tối ưu hóa hiệu năng web. Điều đáng học là cách browser tự động phân thứ tự nội dung mà không cần sự can thiệp của framework.

Lập trình viên nên đọc bài này để cập nhật về kỹ thuật Out-of-Order HTML Streaming đang chuyển từ framework JavaScript vào trình duyệt, giúp tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.