theKashey/react-memoize

🚀 react-memoize – Memoization thông minh cho React mà không cần viết thủ công

react-memoize là thư viện memoization khai báo cho React, tự động theo dõi và tối ưu toàn bộ logic tính toán và render dựa trên tham số thực sự được sử dụng.

react-memoize là một thư viện memoization cấp độ MobX nhỏ gọn (chỉ 7kb), dùng để theo dõi chính xác những gì component thực sự phụ thuộc vào. Thay vì phải tối ưu thủ công bằng React.memo hay PureComponent, react-memoize tự động phân tích hàm compute và chỉ render lại khi giá trị thực sự thay đổi. Dựa trên memoize-state, nó mang lại trải nghiệm tương tự như immer với set, nhưng áp dụng cho get.

✨ Điểm nổi bật

• Memoize: Tạo selector memoization khai báo, tự động theo dõi tham số dùng trong hàm compute.
• MemoizedFlow: Kết hợp nhiều bước xử lý thành một pipeline memoization, mỗi bước độc lập được tối ưu.
• MemoizeContext: Chuyển đổi bất kỳ React Context Consumer nào thành selector memoization.
• MemoizedRender: Memoization trực tiếp hàm render được truyền vào dưới dạng function-as-child.
• pure prop: Cho phép bật chế độ PureComponent để tránh render không cần thiết xuống children.
• IE11+ & React 15/16.3: Tương thích rộng rãi với môi trường trình duyệt và phiên bản React cũ.
• Dựa trên memoize-state: Kế thừa công nghệ theo dõi sâu từ thư viện nền tảng.
• Không cần cấu hình phức tạp: Chỉ cần viết logic như bình thường, memoization xảy ra tự động.

💡 Vì sao đáng chú ý

Khác với React.memo – là cách tiếp cận "PureComponent" so sánh props – react-memoize tập trung vào memoization dựa trên sử dụng thực tế. Nó không chỉ nhanh hơn render lại toàn bộ VDOM khi bị trashing, mà còn linh hoạt hơn reselect trong nhiều trường hợp nhờ khả năng theo dõi sâu từng trường dữ liệu. Đây là công cụ lý tưởng cho các component tính toán nặng, logic phức tạp hoặc khi bạn muốn thay thế componentWillReceiveProps và getDerivedStateFromProps bằng một cách khai báo rõ ràng hơn.

---

#React #Memoization #Optimization #TiniX