Học useCallback - React Hooks (2021)

Học useCallback - Series React Hooks 2021
React Hooks là một tính năng mới được thêm vào React từ phiên bản 16.8 giúp chúng ta có thể sử dụng các tính năng của React như life cycle, quản lý state trong functional components.
Nếu như các bạn đã biết về React Hooks nhưng chưa thực sự hiểu rõ về nó, cũng như thắc mắc lý do vì sao chúng ta phải sử dụng React Hooks hay nếu như các bạn chưa biết gì về React Hooks thì ở trong series này mình sẽ giải đáp các thắc mắc đó và giới thiệu cho các bạn các React Hooks phổ biến mà bạn nên biết thông qua các ví dụ đơn giản để từ đó các bạn có thể áp dụng ngay vào trong dự án của mình sau khi hoàn thành xong series này.
📕Resources
Học useState: • Học useState - React H...
Học useEffect: • Học useState - React H...
Học useMemo: • Học useMemo - React Ho...
Học React JS cơ bản trong 30 phút: • Học React JS cơ bản tr...
Fake data: reqres.in/
💻 Thông số PC & Gears của mình (Affiliate Links):
Máy ảnh Canon EOS M50 + Kit 15-45mm - shorten.asia/b... (TIKI)
Microphones Elgato Microphone Wave 3 - shorten.asia/j... (TIKI)
Micro Rode Videomic Goshorten.asia/w... (TIKI)
Màn hình Dell S2421HN 23.8Inch IPS - shorten.asia/7... (TIKI)
Màn hình MSI OPTIX G27C4 27 VA 165Hz - shorten.asia/w... (TIKI)
Tai Nghe Gaming SteelSeries Arctis 7 DTS.X 7.1 - shorten.asia/E... (TIKI)
Chuột SteelSeries Rival 310 - shorten.asia/A... (TIKI)
Ổ cứng HDD Western Digital BLUE 6TB - shorten.asia/Q... (TIKI)
CPU Intel Core i5-10400 - shorten.asia/y... (TIKI)
Ram ADATA DDR4 XPG GAMMIX D10 8GB 3200MHz - shorten.asia/2... (TIKI)
Mainboard ASRock B460M - shorten.asia/G... (TIKI)
📢 Liên hệ với mình tại:
Facebook: / ​
Instagram: / holetex
Github: github.com/hol...
Facebook cá nhân: / minhtung09
Email: [e-mail]
#reacthooks #reactjs #react #hooks #holetex #usecallback

[@TuanHungDev]

Hay quá anh ơi

[@KienNguyen-mo3we]

hay a

[@trungtrung2248]

Cảm ơn anh ạ, như cách làm trên thì em thấy sẽ giải quyết được vấn đề k gọi lại use effect ở child, còn nếu bạn nào không muốn rerender của childComponent thì em nghĩ nên dùng thẻm memo để wrap component child

[@TUngNguyen-rx4zt]

bái giảng rất dễ hiểu. Em cám ơn anh Tùng

[@sondangphi]

Chưa thấy dislike phát nào, quả thực bạn chia sẻ là rất hay.

[@anhtuanle4991]

dislike làm sao mà xem đc og :))

[@truongminhphuc4337]

@@anhtuanle4991 hồi lâu xem đc mà ông =))

[@nhatminhnguyenquang7965]

nice explain easy to understand thank you❤

[@Pein-df5bk]

Rất dễ hiểu, cảm ơn anh nhiều!

[@nguyenphuocsinh1654]

em từ video M.E.R.M qua đây ạ, rất hay. Luôn ủng hộ anh

[@vanluutran726]

video rất hữu ích, em cảm ơn ạ

[@DuyAnhDuyAnh]

Cảm ơn anh

[@phungtruong821]

Cảm ơn vì những bài học và sự tâm huyết của a

[@SuperDevOfficial]

Công nhận anh dạy hay thật nhưng cho 1 seri về hooks thì ngon :D Cảm ơn anh

[@holetex]

Có series nè em zai. Vẫn đang update thêm nha 😄 React Hooks 2021 kzbin.info/aero/PLqQ6Lvascx2vr-MlKYQCIX2AnfuZ3s0mB

[@PhuocNguyen-cu1lz]

Hay quá a ơi

[@trivothanh1692]

Đúng trọng tâm không lòng vòng. Hay quá a zaiii

[@tunguyenngoc8236]

Hay quá cảm ơn anh

[@thor0911-fo]

6:10 Tham trị và tham chiếu cho bạn nào cần 😉

[@phuhuynh8940]

quá dễ hiểu

[@quangminhle4669]

Tiếp theo anh làm về redux saga nha anh, so sánh giữa 2 middleware thunk với saga nữa

[@Kitajima2910]

Quá Hay Anh

[@nguyenngochai0z]

Hay anh

[@bemocafterbefor5471]

a ơi nếu mình dùng một thăng useRef lưu tham chiếu của hàm getData rồi truyền qua component con cũng được phải ko a? e có thử rồi nhưng kb như vây có phải là một option thêm khi ko dùng useCallback đúng ko ạ?

[@anhtuanle4991]

Mình cũng thử qua và thấy nó khá giống nhau. Nhiệm vụ 2 thằng lúc này là lưu tham chiếu đó vào vùng nhớ nhất định và chắc chắn rằng việc nhận lấy tham chiếu đó từ component con sẽ là chính tham chiếu đó. Nhưng trong docs thì nó không thấy đề cập đến vấn đề này.

[@khanhbao7269]

em có 1 thắc mắc ạ. Sao a không xài depedence empty [] ở Component child luôn ạ a. Nó sẽ vào useEffect cho lần đầu tiên khi load UI còn những lần sau nó sẽ ko vào useEffect đó nữa ạ.

[@khoaanh4609]

làm vậy để cho biết nguyên nhân nên dùng useCallback đó

[@tranvandung5361]

Chủ yếu làm vậy để dùng useCallback mà bạn

[@tuanhuy3005]

Bài học hay lắm ạ

[@thienvuquy1804]

công nhận anh dạy hay thật

[@TruongNguyenVan85]

hay

[@hiennguyenduy268]

được :)

[@minhtringuyen242]

Pass props là mình nên dùng phải k anh nhỉ.

[@holetex]

Cũng tuỳ trường hợp em ạ. Nếu component con của em không quá phức tạp thì mình cũng không cần thiết phải sử dụng nó. Mình cũng cần phải lưu ý vấn đề về bộ nhớ nữa em nhé

[@juhandvan]

Hi anh, dùng useCallback() vào mục đích gì thì e hiểu rồi nhưng ở đây e có một thắc mắc nhỏ là tại sao mình đưa hàm getData() vào trong depedence của ChildComponent. Theo e, các depedence định nghĩa trong useEffect của một Component thường sẽ là các state của compoent đó hoặc là props mà nó nhận từ Component cha nhưng với đk là props đó cũng phải xuất phát là từ state của Component cha, trong ví dụ này của anh hàm getData() đâu có phải state của component cha đâu a nhỉ.

[@holetex]

em đọc thông tin trên ở đâu vậy? em có thể tham khảo docs chính thức của React nhé reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

[@juhandvan]

@@holetex vì depedence là những biến sẽ thay đổi thế nên nó phải là các giá trị của state chứ ạ, như hàm getData() trong ví dụ này có bao giờ thay đổi ( về bản chất ) đâu ạ

[@tuanbuiminh1844]

@@juhandvan hàm , mảng , đối tượng thì bạn chú ý đến vùng nhớ ấy

[@vinhhuynh8146]

Hi anh, em có 1 thắc mắc - Ở Component cha, em tạo ra một useCallback với dependencies là emptyArray và ở Component Child, mỗi lần em goi data comments bằng cách onClick vào 1 button mà không viết nó trong useEffect. Thì mỗi lần thực thi function handleClick ở Component cha thì Component con lại bị re-Render vậy anh. Anh giải thích giúp em với ạ

[@tuongduynguyen5225]

Nếu như bạn nói thì đâu cần dùng useCallback, bạn cứ truyền state, setState qua con, cha thay đổi thì con thay đổi th, còn mục đích useCallback theo mình hiểu thì ở đây là ngăn cản ko cho thằng con re-render liên tục khi có sự thay đổi từ thằng cha ( vì ảnh bỏ getData vào dependency), mà chỉ có thằng cha re-render thôi. Theo quan điểm mình nghĩ thằng useCallback này nó cũng ít dùng :)

[@anhtuanle4991]

rerender này là do bác ko thêm thằng memo vào component con. Vì thằng callback này khi sử dụng với mục đích không rerender component con thì nó phải được gán cùng với thằng memo chứ

[@arielnguyen9142]

👍🏻❤️