Một số thư viện có ích cho tối ưu re-renders

Nọ đội Dwarves Foundation mới đăng 1 bài viết về cấu trúc cũng như các thư viện họ dùng trong các dự án React. Có 1 cái khá thú vị là họ bảo éo thèm chơi state management lib, ví dụ như Redux, mà chỉ cần dùng Context là đủ. Bất ngờ vãi nồi. Hệ thống lớn mà ko có thằng như Redux thì phải tự optimize re-renders bằng tay. Xong hoá ra có lý do cả, họ dùng mấy thằng lib ở bên dưới đây. Cái danh sách này có thêm 1-2 cái của cùng tác giả, tiện em viết luôn.

https://github.com/dai-shi/use-context-selector Khi mình có 1 context, ví dụ như:

const contextValue = {
  count: 0,
  text: "hehe"
}

Có 1 component con, chỉ lấy ra count. Nhưng khi text thay đổi, component này cũng bị re-render. Thư viện use-context-selector này sinh ra để giải quyết vấn đề này. Component chỉ re-render khi cái value nó lấy từ context, bị thay đổi.

https://github.com/dai-shi/react-tracked Giả sử mình có 1 cái selector trong Redux như này:

const allTokensFromAllChains = useSelector(state => Object.values(state.common.tokensByChainId))

useSelector hoạt động là mỗi lần store có thay đổi, nó sẽ tính toán lại giá trị từ cái selector, nếu giá trị đó !== giá trị previous, nó sẽ force re-render cái component. Với selector bên trên, kể cả khi tokensByChainId không thay đổi mà state.common.count thay đổi, thì component cũng bị re-render lại. Lý do là mỗi lần chạy cái selector, Object.values trả về 1 object mới.

Vấn đề này chắc là thằng https://github.com/reduxjs/reselect đã có xử lý rồi. Thằng react-tracked này cũng cấp solution y hệt nhưng với cú pháp khác

https://github.com/dai-shi/react-hooks-global-state Tạo/sử dụng 1 global state với hooks. API tương đối giống với Redux. Lib này tạo ra 1 cái store ở bên ngoài React state
https://github.com/dai-shi/use-atom Tạo/sử dụng 1 loạt các atom states, với hooks. Nó cũng là 1 dạng global state, nhưng được tạo ra với useState + use-context-selector. Cái này sẽ tương thích tốt hơn với Concurrent Mode. More on this: https://blog.axlight.com/posts/developing-react-global-state-library-with-atom-abstraction/
https://github.com/pmndrs/jotai Jotai thì là 1 dạng state management tool. use-atom có API giống với Jotai. Jotai ngoài việc tạo được atom state ra thì nó có thể xử lý side effect cho các atom đó luôn.

hungdoansy/Lib.md