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

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!!! 😊😊

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

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

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

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

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

Đợi mãi.thank anh

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

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?

Đọ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 ạ...

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

Hay quá anh ơi ♥

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

cb khi removeEventListener thì sẽ đc gọi lại khi remove phải không anh, vậy ở ví dụ này chắc mình đâu cần truyền cb cho removeEventListener đúng không ạ?

anh ơi có cái đoạn cuộn xuống chưa > 300 px mà nó vẫn re render là sao ạ.Nếu em state em khởi tạo là true mà em setState là true thì nó có rerender k hả anh

Cảm ơn anh nhiều!

anh cho em hỏi khi thay đổi key khi render ra thì chuyện gì sẽ sảy ra ạ

Tuyệt vời!

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

Hay quá a ơi

Có ai làm video editor thì hỗ trợ anh Sơn khoảng dựng clip đi. Chứ 1m anh vừa lên content rồi quay dựng nữa không xuể

Tuyệt vời

anh cho em hỏi là bản reactjs 18 em cũng làm cái sự kiện window như anh mà không cần remove nó cũng không báo lỗi gì ạ , à do bản 18 update lên không bị hay là do trình duyệt không thông báo

Hay qúa!

hay qua anh oiii

Xịn quá

anh dùng theme gì vậy ạ

Quá đẹp trai lun a ơi

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 ạ

@F8VNOfficial

2 жыл бұрын

Vì listener đã được add rồi em, khi event được dispatch thì function handler sẽ được gọi. Em nên học chắc JS một chút nha em

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???

@lhson1208

Жыл бұрын

react 18 không đưa ra warning nữa , nhưng thật ra vẫn bị rỏ rỉ , vẫn phải fix . đọc cmt a Son bảo vậy :))

cleanup chạy cả khi re-render chứ nhỉ

Hay quá anh, nhưng anh ra video đều hơn dc k ạ

@B8Official

2 жыл бұрын

Ông học cho chắc vào chứ anh Sơn ra nhanh ông cũng phải học lại vài lần mới nhớ được

phiên bản mới hình như ko cần remove eventlistener nữa

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

@F8VNOfficial

Жыл бұрын

Cái này tương lai xa xa mới làm tới em ơiii

A cho e hỏi, vấn đề ẩn hiện trong ReactJS luôn là state kiểu dữ liệu boolean quyết định hả anh. Cảm ơn a!

@F8VNOfficial

2 жыл бұрын

Ko em, do biểu thức điều kiện quyết định em nhé

@ngthuongnguyen9804

2 жыл бұрын

@@F8VNOfficial dạ cảm ơn a, nhưng cho e thắc mắc cái nguyên lý nó hoạt động của nó (setShowGoTotop) nó làm sao hiện đc ạ, giả như mình thêm kiểu dữ liệu khác trong state nó có hiện đc ko ạ. E xin lỗi vì làm phiền anh. Hỏi :)

anh ơi em làm như vầy ko thấy nó báo Memory leak, như vầy ko biết có sao không anh?? window.onscroll = function() { if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) { setGoTop(true) } else { setGoTop(false) }; }

@free2idol1

2 жыл бұрын

Cái bạn làm là "attachEvent" cái này có từ thời IE8 nhưng có nhiều nhược điểm- rồi sau này nó có "addEventLisener" được khuyến khích hơn. Với lại React ko báo vậy thôi chứ event listener cũ vẫn còn nằm trong memory đó, ở chrome console chạy "getEventListeners(window)" sẽ thấy.

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?

@vantai0703

3 ай бұрын

Thật ra nó chỉ có 1 log do function nó rerender thôi, 1 dòng là do thằng strict mode của react nó có sẵn á. Nên nó sẽ hiện 2 dòng log nhe, theo mình hiểu là vậy không biết đúng k :))

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.

@B8Official

2 жыл бұрын

Bọc vào cho code nó dễ đọc hơn thôi bạn chứ bạn không bọc thì giả sử nó nhiều html trông nó khó nhìn

Hình như em thấy react 18 fix cái việc rò rĩ bộ nhớ rồi thì phải, nếu như vậy thì có cần phải viết hàm clean không ạ?

@F8VNOfficial

Жыл бұрын

Cái đó ko tự fix đc đâu em, coder phải tự biết vấn đề mà xử lý em ạ. Chỉ là 18 nó ko warning thôi ý

mọi người cho em hỏi với ạ, nay em sử dụng nextJS thì screen hay window API đều bị "is not defined", cả reactJS cx thế ạ, em có mò google thì nhiều trang bảo là nhưng cái API này chỉ dùng đc trên browser chứ ko chạy đc trên nodeJS env, em thấy cx hợp lý nhưng em thấy anh Sơn dùng rất thoải mái mà ko bị lỗi gì, mong mọi người và anh Sơn giải đáp giúp, em cám ơn

@F8VNOfficial

2 жыл бұрын

A dùng React chạy ở browser em ơi, em dùng next nếu code react đó được render trên server thì không có window đâu em nha

@huyhoangle1612

2 жыл бұрын

@@F8VNOfficial dạ thưa, em cám ơn anh đã trả lời, em dùng nextJS và render trên browser, mấy hôm nay dùng react thì ổn nhưng sang next dùng window thì vẫn lỗi ạ =))

cho anh 1 tym

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 =))))

@NhatNguyen-zg6il

2 жыл бұрын

Nhầm rồi ông ơi , nếu ông hiểu ra r thì thôi tui cmt cho mấy ông xem sau nha :D nó gọi 1 lần để addEventListener , và để hiểu rõ hơn thì các ông console ở handleScroll , Callback , Cleanup là biết nó sẽ chỉ gọi console ở handleScroll vì eventlistener đã đc add ấy

@atthanh882

2 жыл бұрын

@@NhatNguyen-zg6il Đúng rồi cái log đấy trong event mà

@HieuNguyen-ei8ep

Жыл бұрын

Callback nó đâu được gọi đâu bạn, mà là HandleScroll được gọi chứ, bạn thử console log ở ngoài HandleScroll nhưng vẫn trong callback là hiểu

CHỜ MÃI ĐẠI CA ƠI HUHUU , SAO NGỈ GẦN 1 TUẦN VẬY XẾP , LÀM EM HÓNG MUỐN GÃY CÁI DÉP LUÔN :((((((((((

@F8VNOfficial

2 жыл бұрын

Tại anh edit cái video review đồ đạc mất 3-4 ngày, xong cũng mệt quá nên mãi mới quay thêm đc 😥

1,7,16,37,79,173,... 4 số tiếp theo ae

Cmt đầu

hình như anh quên làm cái video note lại những điều cần lưu ý cho useEfftect()

mấy thằng hooks này em học thấy hơi loạn ta :v

em làm y như này bên typescript nhưng kh cleanup khi unmount, sau đó mount lại và resize thì nó không báo lỗi như a là sao v ạ

@F8VNOfficial

2 ай бұрын

Không báo lỗi thì nó tuỳ vào cơ chế của phiên bản React. Những kiến thức cơ bản về Javascript cho ta biết memory leak sẽ xảy ra ở đó em, em console thử trong event handler là biết đó.

@quanle590

2 ай бұрын

@@F8VNOfficial dạ em cảm ơn a

Ủa mà hình như bấm Button nó ko chạy lên top nhỉ :v

@F8VNOfficial

2 жыл бұрын

Cái đó tự làm thôi em, học React lại bắt anh nói lại JS à 🤣🤣

anh ơi , hình như là từ phiên bản React 17 trở đi useEffect nó tự huỷ DOM Event khi unmounting, hì phải

@F8VNOfficial

9 ай бұрын

Hic không phải em ơi. Em thử ôn chắc lại JS em sẽ tự hiểu là làm sao nó tự huỷ được khi em listen event ở đối tượng thuộc phạm vi window như vậy đc em. Nó ko báo warning ra thôi.

@chaudeveloper6816

9 ай бұрын

dạ anh, em hiểu rồi ạ, em thử console ra thì khi unmounting nó vẫn còn DOM even đó·@@F8VNOfficial

Em vẫn làm như anh nhưng không rõ tại sao nó khộng hiện warning memory leak .

@NamNguyenacPhuong

2 жыл бұрын

fix được chưa bạn. mình cũng bị vấn đề này

@toanhuynh7078

2 жыл бұрын

@@NamNguyenacPhuong chưa ban

@luu-quangnhat5538

2 жыл бұрын

​@@toanhuynh7078 React 18 bỏ warning đó rồi nhưng thực chất nó vẫn chạy ngầm ở dướ nha. Trong vd này của a Sơn bạn có thể mount/unmount vài lần rồi console chạy "getEventListeners(window)" vào trình duyệt sẽ thấy nó ngầm tạo thêm event ở dưới

hay bài sau anh giảng kĩ hơn nha anh

@F8VNOfficial

2 жыл бұрын

Kỹ hơn ở điều gì em ơi? Video sau anh nói về trường hợp khác thôi em

@NamangMinh1

2 жыл бұрын

em chưa hiểu lắm về useeffect

@F8VNOfficial

2 жыл бұрын

@@NamangMinh1 em học kỹ lại kiến thức cần có anh nói trong bài 1 đi em

@NamangMinh1

2 жыл бұрын

@@F8VNOfficial vâng ạ.thì ra là thế ...

@KhangNguyen-kq2iw

2 жыл бұрын

bạn xem k hiểu thì xem kĩ lại từng video nha, anh Sơn dạy tới đâu là chắc kiến thức phần đó ý

cách 2: trong trường hợp ta không muốn dùng đến hàm cleanup useEffect(() => { window.onscroll = (e) => { if (window.scrollY >= 200) { setScrollToTop(true); } else { setScrollToTop(false); } } }, [])

Cmt đầu