Frontend Dependency Injection: From Context API to Composition Root
Bài viết bắt đầu bằng việc mô tả cách nhiều dự án React hiện nay sử dụng Context API để thực hiện dependency injection, nhưng nhanh chóng chỉ ra hạn chế của cách này như việc lồng.provider sâu dẫn tới re‑render không mong muốn và khó kiểm tra đơn vị. Sau đó, tác giả giới thiệu mô hình Composition Root – nơi tất cả các phụ thuộc được tạo và kết nối ở một điểm duy nhất, thường là tệp index.js hoặc App.tsx, giúp làm rõ đồ thị phụ thuộc và giảm bớt việc truyền props qua nhiều lớp component. Khi áp dụng Composition Root, các dịch vụ có thể được thay thế bằng mocks hoặc triển khai khác mà không cần thay đổi mã component, từ đó cải thiện độ bao phủ test đơn vị lên khoảng 20‑30% trong các trường hợp thử nghiệm thực tế. Bài cũng nhấn mạnh việc kết hợp với TypeScript và các container DI nhẹ như tsyringe hoặc inversifyJS để quản lý vòng đời (singleton, transient) một cách tự động. Kết luận là, cho dự án lớn hoặc dự kiến mở rộng, chuyển từ Context API sang Composition Root không chỉ giảm lỗi thời gian chạy mà còn làm cho kiến trúc frontend dễ duy trì và mở rộng hơn.
