#react

You're Using React Compound Components Wrong

Hầu hết hướng dẫn về React compound components đều dùng ví dụ <Select>/<Option> không phù hợp, vì pattern này chỉ tối ưu cho layout linh hoạt với nội dung tĩnh (tabs, cards), chứ không phải danh sách dữ liệu động. Khi dữ liệu đến từ API, sử dụng props API đơn giản hơn, type-safe hơn, và dễ xử lý sắp xếp/lọc/ảo hóa.

Lập trình viên nên đọc bài này để tránh nhầm lẫn giữa mô hình Compound Components—dành cho giao diện layout tĩnh—với trường hợp sử dụng cho danh sách dữ liệu động, từ đó tối ưu hóa code, tránh lỗi type safety và áp dụng đúng nguyên tắc thiết kế React hiệu quả.

Typed Polymorphic React Component

Bài viết hướng dẫn cách xây dựng một component React đa hình có kiểu (polymorphic) bằng …

35 React Interview Questions Senior Developers Still Get Wrong

Bài viết cung cấp 35 câu hỏi phỏng vấn React dành cho senior developer, xoay quanh các chủ đề như rendering behavior, hooks (useState, useRef, useEffect, useLayoutEffect), tính năng React 19 (Actions, useOptimistic, React Compiler), Server Components, tối ưu hiệu suất, quản lý state, React Router và testing. Mỗi câu hỏi đi kèm ví dụ code thực tế và giải thích chi tiết, tập trung vào hiểu bản chất React thay vì ghi nhớ API.

Lập trình viên senior cần đọc bài này để khắc phục lỗi thường gặp trong các câu hỏi thực tế về React—không chỉ là nhớ kỹ thuật mà là hiểu sâu về cơ chế hoạt động, từ rendering đến các tính năng mới nhất như Server Components và React Compiler, giúp họ ứng dụng kiến thức một cách chính xác trong công việc.

Lattice: Describe Inertia UIs in PHP

Lattice là framework UI điều khiển từ server cho Laravel, cho phép định nghĩa toàn bộ giao …

Smarter Slice Spacing in Prismic

Three techniques for making Prismic slices respond intelligently to their surroundings: establishing a shared spacing baseline with a reusable Bounded component, auto-collapsing doubled gaps between adjacent slices with the same background using CSS sibling selectors, and reading slice data (index and neighbors) via SliceZone props to conditionally adjust padding. Code examples use React and Tailwind CSS but the patterns are framework-agnostic.

Next.js 16: Turbopack, React Compiler & Cache

A comprehensive guide to three major changes coming to Next.js 15+ and the anticipated Next.js 16: Turbopack moving toward becoming the default production bundler (replacing Webpack), the React Compiler graduating from experimental to built-in for automatic memoization, and a restructured opt-in caching layer using 'use cache', cacheLife(), and cacheTag() APIs. Covers migration checklists, before/after config examples, memoization refactoring patterns, and a step-by-step upgrade sequence including codemods and benchmarking guidance.

This Week In React #287: Fragment ref, React Compiler, StyleX, React Router, cnfast, Base UI, Remotion, React Aria

Tuần này giới thiệu nhiều cập nhật quan trọng trong hệ sinh thái React: Fragment ref (FragmentInstance) sắp ra mắt trong React v19.3, tiến triển của React Compiler (tích hợp Bun, phiên bản Rust), React Router 8.0 (chỉ ESM, cải tiến "boring-by-design"), cùng các bản phát hành mới của StyleX 0.19, Base UI 1.6 và TanStack Table v9. Bên phía React Native, Reanimated 4.5 bổ sung hỗ trợ CSS pseudo-selector, Expo SDK 56 ổn định iOS widgets & Live Activities, VisionCamera cho phép xử lý video thời gian thực. Ngoài ra, Vite 8.1 ra mắt chế độ Dev Mode tích hợp, Astro 7.0 tăng tốc build ~61% nhờ Rolldown, TypeScript 7.0 RC (viết lại bằng Go), và GitHub Actions siết chặt bảo mật ngăn chặn tấn công supply chain.

Những công nghệ mới trong React và React Native như Fragment ref trong React 19.3 hoặc React Router 8.0 có thể giúp bạn tối ưu hiệu suất, cải thiện tính bảo mật và mở rộng khả năng ứng dụng của mình ngay từ những thay đổi cơ bản nhất.

How to Build an Animated Badge Component with shadcn/ui

A step-by-step guide to building an animated badge component using shadcn/ui, Tailwind CSS, and Framer Motion (motion/react). Covers installing a pre-built badge from the Shadcn Space registry via CLI, then walks through wrapping the Badge component with motion.create(), adding layered radial-gradient glow effects, animating a check icon with easeOutBack spring physics, and staggering individual letter animations using Variants and custom index values. Includes a customization example showing how to create a blue 'Verified' variant by swapping colors and icons.

Figma adds code layers to the canvas and lets users build custom AI plugins at Config 2026

Figma unveiled several major updates at its Config 2026 conference. The headline feature is code layers, which brings executable code directly onto the collaborative design canvas, allowing teams to clone repos and extract flows from code into design layers. The feature is backed by React and supports npm packages including motion and 3D libraries. Other announcements include native animation and 3D transform support, AI-generated shader effects, prompt-based custom plugin creation, and new AI skills for Figma's design assistant that can connect to external tools like Notion, GitHub, and Excel. Figma also deepened integration with Figma Weave (from its Weavy acquisition). The updates come as Figma faces competitive pressure from AI coding tools like OpenAI Codex, Canva's AI model, Adobe Firefly, and Google Pics, with its stock down ~79% since its July 2025 IPO.

I need a CVE tool, it took me much less effort to build correctly

A developer builds a container vulnerability scanner with a web console on top of ConfigHub, a platform that treats configuration as queryable data. By reusing most of the scaffolding from a previously built RBAC Manager app, the CVE tool required only swapping domain-specific logic: a custom Go scanner that pulls image layers, reads OS package databases, and matches against a unified CVE database (GitHub Advisory, CVE List V5, OSV.dev). Scan verdicts are written back onto Kubernetes Deployment Units as annotations, and a Trigger gates any workload with critical CVEs — no admission webhook needed. The React web console reused ~80% of the RBAC Manager codebase, with only the model (~250 lines), snapshot query clauses, and page components replaced. The post generalizes a 5-step pattern for building internal tools on ConfigHub: define your object, load a fleet snapshot, render views, act through the API, and let policy live in ConfigHub gates.

Writing Custom Renderers for React

A deep dive into how React renderers work, written by the maintainer of React Native Testing Library (RNTL) who built a new custom test renderer after React Test Renderer was deprecated in React 19. Covers the three core trees React uses (element tree, Fiber tree, host instance tree), the two-phase reconciler process (rendering and committing), the HostConfig interface renderers must implement, and the difference between mutation and persistence renderer modes. Includes concrete code examples of host instance types and operations, plus lessons learned about tight coupling between React, Reconciler, and renderer versions.

Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

A practical walkthrough of building embeddable widgets using React, Tailwind 4, Vite, and Web Components delivered as a single JS file. Two significant browser limitations are uncovered and solved: Tailwind 4's heavy reliance on CSS @property rules which Shadow DOM doesn't fully support, and @font-face declarations not working inside Shadow Roots. The @property issue is addressed with a custom PostCSS plugin (~300 lines) that transforms Tailwind's property registrations into concrete CSS variable declarations scoped to the shadow host. The font issue is handled by a runtime font loader using the FontFace API that attaches fonts to the parent document instead of the Shadow Root.

I asked Claude Code, Codex, and Google Antigravity to build a polished frontend, and only one understood UX

A hands-on comparison of three AI coding tools — Claude Code, OpenAI Codex, and Google Antigravity — tasked with building a polished React frontend for a project management app called TaskForge. Codex produced a functional but unrefined result with scaling issues and awkward UX interactions. Google Antigravity delivered a clean, balanced interface but missed nuanced UX touches like context-aware progress bar colors. Claude Code stood out by nailing small details: color-coded progress bars, smooth animations, a well-designed Kanban board, and cohesive iconography — demonstrating the strongest grasp of real-world UX quality.

Lucide Releases Version 1.0, Removing Brand Icons and Cutting Bundle Size for Millions of Projects

Lucide has released version 1.0, its first stable major release, featuring over 1,600 icons. The key changes include removal of all trademarked brand icons (GitHub, Facebook, Figma, Slack) due to legal pressure and maintenance concerns, with Simple Icons recommended as an alternative. The lucide-react package was reduced by 32.3% (from 11.4 MB to ~1 MB gzipped) by dropping the legacy UMD build in favor of ESM and CommonJS only. New context providers for React, Vue, Svelte, and Solid allow setting shared icon defaults. Other additions include a standalone Angular package, renamed Vue package, improved accessibility defaults, shadow DOM support, and updated documentation. Developers upgrading from v0 need to handle breaking changes around removed brand icons and renamed packages.

Bulletproof React: Building React Apps That Survive Growth

Bulletproof React is an architectural approach for React applications inspired by Alan Alickovic's open-source project. It centers on feature-based organization where all code related to a feature lives together, rather than grouping by file type. Key principles include: exposing only approved exports via public API index files, enforcing boundaries with ESLint rules, separating state by type (UI state in components, app state in Zustand, server state in TanStack Query, URL state in the browser), centralizing API communication in a dedicated layer, and treating security and performance as architectural concerns from day one. Testing uses Vitest, React Testing Library, Playwright, and MSW. The approach adds overhead and may be overkill for small projects, but pays dividends as codebases grow.