useEffect() with DOM events | React hooks 2021 | React JS

Trong bài học này mình sẽ tiếp tục giới thiệu tới các bạn về useEffect() with DOM events | React hooks 2021 | React JS

#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
-------------------------------------

F8 Official
(c) Sơn Đặng

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

[TriNguyen-ogws]

một người thầy dạy có tâm và có tầm, thế hệ của tụi em rất ngưỡng mộ anh, chúc anh và gia đình có nhiều sức khoẻ và kênh ngày càng thành công hơn nữa!!! 😊😊<3

[dinhanhtuan]

1. Lắng nghe DOM event từ react:
- Sử dụng js thuần để listen DOM event (window.addEventListener('eventName', callback)
- Khi eventlistener được kích hoạt, nó được lắng nghe từ đối tượng window nên chỉ khi nào close tab, hoặc browser thì mới kết thúc. Component unmount thì evenListener vẫn hoạt động. Khi mount lại thì sinh ra 1 eventlistener mới
=> dẫn đến tình trạng memory leak, khi component được mount lại thì eventlistener cũ vẫn đang lắng nghe từ component cũ
=> sử dụng cleanup funtion, dùng để sử lý khi component bị unmount (áp dụng cho cả 3 trường hợp của useEffect)
=> return ra 1 function trong useEffect

[tripham]

Học qua khái niệm này rồi em công nhận a dạy kĩ thật xem lại quả ko phí t/g :D

[ThanhNguyen-hdmi]

Cam on anh rat nhieu ve nhung bai giang hay a

[buivannhat]

ngồi hóng miết nới thấy anh ra video, huy vọng mai anh ra thêm video cho tụi em ạ, thanks anh nhiều

[nvtentertainment]

Em học Spring boot backend xong qua học react bên fe thấy khá là thú vị về cách code

[ovanthao]

Hay quá thầy ơi, em cảm ơn thầy nhiều <3

[vangianginh]

anh vừa dạy vưa thực hành tâm huyết quá

[khanhnguyenxuan]

Chờ mãi cũng có video tiếp theo rồi :D

[nhamnguyendinh]

anh cho e hỏi 11:50 : tại sao return () => { unmouting ...} lại được gọi lúc component unmount ?
theo e hiểu ở dạng useEffect(Callback, [ ]) thì Callback phải được thực hiện hết,
nhưng khi chưa unmount thì return chạy( dòng 65 vẫn chạy )
E đoán là return của Callback chỉ được thực hiện khi component unmount?

[xuaanlee]

hay qá a.Mong a ra nhiều video bổ ích nữa ạ!

[vanoan]

Đọc document của react mãi chẳng hiểu.. xem video của anh một lần hiểu luôn..
thask anh ạ...

[atphamminh]

anh Sơn ơi, anh có bài nào dạy tạo virtual scrollbar không anh, nếu có anh cho em link của bài đó đi, còn không có thì mong anh ra seri tạo virtual scrollbar

[maicaotri]

Em mạnh dạn đoán video sau là gọi API xong trong khi chờ API về thì unmount component.

[nhamnguyendinh]

anh cho e hỏi 07:50 : a đang dùng dạng useEffect(Callback, [ ]), nó chỉ gọi Callback 1 lần khi component mount xong.
Nhưng khi scroll thì nó lại gọi Callback liên tục ( console.log(' set state ') bắn ra liên tục).?
E đoán là "scroll " được coi là 1 deps nên khi scroll thay đổi, Callback sẽ được gọi.
Nếu viết đầy đủ ở đây phải là useEffect(Callback, [ scroll ]).
mong anh trả lời =))))

[luu-quangnhat]

Tại sao ở 7:48 a Sơn đã xoá 2 lần re-render rồi mà lúc này lại còn bắn ra 2 lần re-render nữa trước khi vào set state vậy?

[anhay]

Rất thích những bài giảng của thầy. Thầy có dạy react native k ạ

[vangianginh]

nếu truyền [] chỉ chạy 1 lần sau mỗi lần render sao cuộn lên cuộn xuống nó vẫn thay đổi được ạ

[ledinhthai]

Tại sao mình làm giống vậy, nó lại ko đưa ra warning rò rỉ bộ nhớ giống vậy ta??? Chỗ mục console.log của mình vẫn em ru. Why???

[phungtruongdinhquan]

5:50 Cho em hỏi tại sao lại có dấu ngoặc tròn bọc thằng button lại v ạ? E cám ơn.