andywer/use-inline-memo

⚛️ use-inline-memo — Memoize bất kỳ lúc nào, không cần tuân thứ tự hook của React

React hook cho phép memoize giá trị và callback ở bất kỳ đâu trong component, không bị ràng buộc gọi ở đầu hàm như useMemo/useCallback truyền thống.

use-inline-memo giải quyết hạn chế của React hooks: chỉ được gọi ở đầu component, không conditional. Hook này dùng Proxy để tạo một đối tượng memo, mỗi phương thức memo.X() tương ứng với một giá trị được ghi nhớ theo deps. Hỗ trợ IE11 bằng cách khai báo trước các khóa.

✨ Điểm nổi bật

• Memoize inline bất kỳ lúc nào: Gọi memo.X() trực tiếp trong JSX, không cần tuân thứ tự hook.
• Hỗ trợ IE11: Khai báo trước các khóa bằng useInlineMemo("key1", "key2", ...).
• Phát hiện trùng lặp an toàn: Cùng một khóa dùng hai lần trong một lần render sẽ gây lỗi ở môi trường dev.
• Tương thích React hooks: Hoạt động như useMemo/useCallback, nhưng không cần hàm bọc.
• Tối ưu re-render: Tránh tạo object mới mỗi lần render cho style props hoặc callbacks.

💡 Vì sao đáng chú ý

Thay vì cấu trúc component để gọi hook đúng thứ tự, use-inline-memo linh hoạt hóa việc ghi nhớ. Phù hợp với event handlers, style objects, hoặc bất kỳ giá trị nào cần ổn định tham chiếu giữa các lần render. Đặc biệt hữu ích khi component có logic điều kiện phức tạp.

---

#React #ReactHooks #Memoization #Performance #OpenSource #TiniX