Refactoring a Messy React Workflow: From One Giant Modal to Independent Vertical Slices
Bài viết bắt đầu bằng việc mô tả một component modal đơn phep trong một ứng dụng React lớn, nơi tất cả các tính năng như tạo, chỉnh sửa, xóa và hiển thị dữ liệu được gộp vào một file duy nhất. Nguyên nhân kỹ thuật là sự kết hợp chặt chẽ giữa trạng thái local, các effect và các prop truyền qua nhiều lớp, khiến việc thay đổi một phần dễ dàng gây ra side‑effect không mong muốn và khó viết unit test. Hệ quả là tốc độ phát triển chậm xuống, số lỗi tăng khi mở rộng tính năng, và đội ngũ phải dành thời gian lớn để debug và tái sử dụng code. Đáng học là cách thực hiện refactor giữ hành vi bằng cách tách modal thành các vertical slice độc lập, mỗi slice quản lý riêng state và effect của mình bằng hooks hoặc context, sau đó komponen cha chỉ responsible để orchestrate chúng. Kết quả sau refactor là mỗi slice có thể được test riêng, kích thước file giảm hơn 50% và thời gian thêm tính năng mới giảm đáng kể, minh họa lợi ích của việc áp dụng kiến trúc feature‑based trong React.