Một hook phổ biến useLocalStorage

Phuong Vo

Đăng ngày 05 tháng 9, 2022

Để dễ dàng và tiện dụng hơn trong việc sử dụng localStorage trong dự án React. Mình viết thành một custom hook useLocalStorage.

Mã Nguồn

Sử Dụng

Ưu Điểm và Nhược Điểm

Việc sử dụng đi sử dụng lại trong dự án. Có vài điểm rất bất lợi là phải luôn luôn kiểm tra xem có tồn tại hay không, vì chỉ tồn tại ở Client Side Rendering. Chính vì vậy để đỡ phức tạp thì mình gơm nó lại thành một custom hook, và sử dụng khi cần thiết.

Mã Nguồn

Sử Dụng

Hook này tương đối dễ sử dụng chỉ cần dòng code này: . Đối số đầu tiên là , đối số thứ hai là giá trị mặc định của dữ liệu tương ứng với .

Ưu Điểm và Nhược Điểm

Một số điểm lợi của hook này

Dễ sử dụng hơn so với trực tiếp. (giảm bớt được nhiều logic kiểm tra - )
Dễ dàng truy xuất giá trị trong , và set lại giá trị của biến .

Nhưng cũng một điểm bất lợi

Do mình không sử dụng trực tiếp nên ở mỗi thời điểm gọi hook này, mình đồng thời tạo ra một biến useState để truy xuất và và đặt lại giá trị của biến nếu cần.
Do hook trả về một tức là sẽ có trường hợp lại nếu mình set cho nó một giá trị mới. Điều này đồng nghĩa với việc nếu trong dự án mình phụ thuộc với để thì phải sử dụng đúng đã khai báo.

Ví dụ:

Nếu một biến nhưng có 2 truy xuất thì việc thay đổi sẽ chẳng ảnh hưởng gì tới cả. Trường hợp này phải sử dụng cẩn thận nhé.