thanhle.blog/khi-nao-thi-them-state-moi-o-frontend

[giscus[bot]]

thanhle.blog/khi-nao-thi-them-state-moi-o-frontend

Công thức khi viết state frontend một cách gọn gàng, ít bug 🐞

https://thanhle.blog/blog/khi-nao-thi-them-state-moi-o-frontend

[tulna07]

Chào anh Thành. Trước tiên cảm ơn anh vì những đóng góp cho cộng đồng IT Việt Nam qua những bài viết kỹ thuật như thế này.
Em có góp ý Flow: Event → Handle event → Set new state như sau ạ.

const onClickCheck = () => {
    setFilterMineTodo(!filterMineTodo); // (1)
    setFilteredList(filterMineTodo
      ? todo.filter((item) => item.userId === 1)
      : todo); // (2)
  }

Sau khi dòng (1) thực thi thì giá trị filterMineTodo ở dòng (2) vẫn là giá trị cũ phải không ạ?
Ý em là giá trị được cập nhật cho biến filterMineTodo ở dòng 1 ở lần render tiếp theo mới được sử dụng. Do đó, giá trị biến filterMineTodo ở dòng (2) sẽ là giá trị cũ. Như vậy biến filteredList sẽ không được cập nhật đúng cho lần render sau.
Anh có thể xem qua code mẫu ở đây ạ, codesandbox

[thanhlmm]

Sau khi dòng (1) thực thi thì giá trị filterMineTodo ở dòng (2) vẫn là giá trị cũ phải không ạ?

VD filterMineTodo đang là true thì code chạy tới dòng (2) thì vẫn là true trong khi expect là false

[thanhlmm]

Cái này em có thể log ra để check được

[tulna07]

Vậy filterMineTodo ở dòng 2 phải là !filterMineTodo anh nhỉ?

    setFilteredList(!filterMineTodo
      ? todo.filter((item) => item.userId === 1)
      : todo); // (2)

[thanhlmm]

Nó sẽ giúp em chạy đúng. Nhưng về mặt readabily của code thì lại cực kì khiến người khác confused.
Vì khi đòng dòng 1 thì gần như 99% (kể cả anh) cũng nghĩ dòng 2 sẽ có giá trị mới. Em sửa lại logic ở dòng 2 thì sẽ khiến người đọc còn confused hơn.
Root cause của vấn đề này là lifecycle của React, nếu em tìm hiểu kĩ sẽ biết.

Nhưng in the end thì nếu em vẫn viết state theo style: Event → Handle event → Set new state thì nhưng lỗi như vầy sẽ dễ xuất hiện hơn rất nhiều.

Nên cách tốt nhất khi xử lý state nền là: Event → Set new state -> Compute new state

Anh có viết detail về cách làm ở đây: https://thanhle.blog/blog/state-management-gon-gang

[tulna07]

Thanks anh nhé :D