React hooks: 14 - Giới thiệu Memoization và React.memo (2020) 🎉
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- Memoization là một kĩ thuật lập trình khà là hay và bạn cũng đã đang sử dụng nó nhưng có thể bạn chưa biết thực sự nó là gì? Cùng mình xem hết video để giải đáp thắc mắc nhé.
Đây là một video trong chuỗi videos về React hooks của mình.
Trong video này, mình sẽ chia sẻ cho các bạn.
✅ Giới thiệu memoization là gì?
✅ Một ví dụ đơn giản sử dụng kĩ thuật memoization
✅ React.memo() có liên quan gì tới memoization
✅ React.memo() là HOC hay là một react hooks?
✅ Sử dụng React.memo() như thế nào và code demo 😉
Hi vọng qua video này giúp các bạn có thể hiểu được về memoization cũng như là React.memo(). Lưu ý, trong video mình có đề cập tới việc khi nào sử dụng React.memo() nữa nhé, đừng bỏ sót nha 😍
🌐 Link tham khảo
Slide trong video: drive.google.c...
React.memo(): reactjs.org/do...
Định nghĩa Memoization: en.wikipedia.o...
blog.bitsrc.io...
www.freecodeca...
codeburst.io/u...
#memoization #react.memo #react_hooks
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp tại đây nhé:
Ủng hộ tôi: unghotoi.com/e...
MoMo/ZaloPay: 0901 309 729
Kết nối với mình:
🎉Facebook: / nvhauesmn
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
Cảm ơn mọi người đã xem video của mình nhé! 😉
Bạn học được gì mới từ video không nè? Nếu có hãy chia sẻ bên dưới cho mình biết với nhé ❤️
một tuần ra bao nhiêu video anh
Anh khác mấy ông thầy em ở một chỗ là làm cho người học hiểu rõ được bản chất
haha cảm ơn em nhiều nhé Thạch ❤️
Tuyệt vời... Phần lý thuyết anh dạy dễ hiểu quá. Đi làm thực hành easy luôn 😜
huhu thank youuu bạn , giảng siêu dễ hiểu
Voice thì okieee với mood tốt lắm ạaaaa
hihi cảm ơn bạn nhiều nhiều nhen 😊
Đọc doc của React mà không hiểu . May nhờ có anh. Chia sẽ toàn thứ em cần hihi
hehe ngon lành 😍
Hóng video tiếp quá. Nhờ anh hiểu dõ bản chất bao nhiêu. Cảm ơn anh.
hihi cảm ơn e nhiều nhé Hưng. Hẹn e 7h tối nay có video mới về useCallback vs useMemo nha 😉
Quá bổ ích luôn !! cảm ơn a nhén !! Vì mọi người nên hãy cố gắng phát triển kênh nhén a
Triệu Thuận hihi okie cảm ơn em nhiều nhé Thuận, a sẽ tiếp tục làm videos để mọi người tham khảo nè 😉
Easy Frontend dạ okii a iuuu
Hay lắm bạn ơi, hóng phần useMemo và useCallback của bạn.
hihi cảm ơn bạn Nghĩa nhiều nha!!! ❤️ Bạn có học được gì mới từ video hk Nghĩa hen?
cảm ơn anh vì chuỗi video React
yeahhh cảm ơn em đã đồng hành cùng anh trong series này nha. Em xem thử có học được gì mới từ video này ko nha? 🙂
Mong chờ useCallback với useMemo quá 😜
hahaa hi vọng tối t6 có cho mn xem tham khảo nha heheeee
Video rất hay ạ. Hóng anh ra video làm project sử dụng React Hooks :D
hi Hiếu, sang cái series về hooks này, nó tới phần redux và redux project là mình có apply hooks vào project đó Hiếu. Có gì Hiếu tham khảo thêm nhen 😉
Qua hay anh ơi, em mò phần nầy mãi ạ ❤ !!!!
Vi vu duc yeahh rất vui khi giúp ích được gì đó cho em nè 🥰
hôm trrước học HOC mà chưa biết ứng dụng như nào. hay quá anh :D
hihi cảm ơn em nhiều nhé Thành 😉 Em có đụng tới cái kĩ thuật memoization bao giờ chưa Thành hen ?
Easy Frontend em có xài đc cái HOC đc 1 lần gọi là test thôi anh ạ. chưa tìm thấy đc ứng dụng nó ntn, có video a giới thiệu luôn khỏi bỡ ngỡ :d
e cảm ơn đúng lúc đang cần
bài học ý nghĩa quá anh. ra thêm video về HOC nữa đi anh.
hi Henry, do functional component thì dùng hooks nhiều hơn nên anh chắc sẽ ko làm video về HOC em nhen hihi 😉
Hay quá a, trước xài class component tính toán phức tạp toàn phải check = shouldComponent update,
hihi thật ra bên class component, thì mình nên dùng PureComponent, ko nên can thiệp bằng shouldComponentUpdate() nè 🙂
@@EasyFrontend dạng e có 1 container chứa các component con render ra bằng array.map nhưng các element con trong đó có thằng e muốn update nhưng có thằng e không muốn update
I'm VuCms à cái đó ReactJS nó xử giúp em rồi nha.
Em cứ update cái state là list mới (nhớ clone array trước khi update, và object cần thay đổi cũng phải cần clone object)
Dạng của em
HomePage
- ProductList
- Modal > ProductForm
HomePage sẽ có state
- selectedProduct
- productList
- showModal
Khi một product được click, thì update state selectedProduct rồi showModal = true.
Khi ProductForm submit thì xử lý gì đó, rồi tạo ra state productList mới, cái component ProductList sẽ tự render lại nha.
Em cú thử rồi cho anh biết KQ nha hehee
@@EasyFrontend của e dạng wrapper > item * 5, đặt vấn đề là các item dùng chung 1 state lấy từ redux, nhưng e chỉ muốn update 1 trong số các item, chứ k phải dạng click show modal như trên a
@@ImVuCms hi Vũ ơi, nó the same nhé Vũ. Cách thức em cần làm nó cũng như vậy thôi nè. 🙂 Cũng update state (nhớ phải clone nó ra, nếu e ko hiểu phần này thì coi lại video về tham chiếu của anh nha) 🙂
hay anh ạ, cảm ơn anh
thank you anh, hóng video tiếp theo
hehee hẹn em tối mai 7h nhé, hi vọng chuẩn bị làm kịp 😉
Cám ơn anh!
hay quá ạ
Hay anh ơi
A Hậu nói chuyện cute gê 🥰🥰
haha cảm ơn em nhiều nhé 🥰
A dạy hay thật :D
Khánh Lê hihi cảm ơn Khánh nha, ý mà e có học được gì mới từ video hk Khánh? 🙂
@@EasyFrontend có, học thêm đc kiến thức mới a ạ
Hay quá chời :D
Nếu có thể, hy vọng anh làm 1 list full về react apollo
hihi anh chưa xài react apollo Phúc ơi =)))
@@EasyFrontend Dạ! Xài với graphql power cool luôn á anh! hê hê
Pác ơi trường hợp comp Hero có state là name.
1. state name đó bị change thành "easy fe changed"
2. Click increase trên comp App
Kết quả là nó sẽ show easy frontend hay easy fe changed
Nếu z có nên dùng react.memo cho những comp có state như v ko
có vẻ hơi rối rối á em, anh chưa hiểu lắm.
react.memo là để hạn chế re-render component con khi props ko đổi
còn ví dụ của em là state của component con, thì nó đâu họ hàng gì đâu em hen? 🤔
@@EasyFrontend thì ý e là state của comp con bị đổi r, mà prop ko đổi thì lần render rerender sau của tg app hàm react.memo(hero) nó sẽ trả ra cái comp hero vs state cũ fai k a
vd như Hero có cái state là background color. ban đầu là green, sau khi click thì no change thành red. Khi click vô nut increase nó rendẻr lại tg App -> gặp thằng memo(hero) nó trả ra component hero có background là green, fải z k a
Anh cho em hỏi muốn check state hiện tại và nextState trong react.memo thì làm như nào ạ. Bên class dùng ShouldComponent thì check được còn bên hook dùng memo chỉ cho check props thôi ạ
à qua hooks thì em suy nghĩ theo hướng hooks nhé, sử dụng useEffect() để xử lý dependencies em nha 😉
@@EasyFrontend dạ ý a là dung memo để check prop còn dùng useEffect để check state đúng ko ạ
@@taikim1809 à ko em nhen, chỉ dùng useEffect thôi nè 😉 a hãy thử xem có cách nào làm mà ko cần phụ thuộc vào value trc đó ko nha 🙂
cái logo đẹp thế anh
hihi cảm ơn em nhiều nhé Trung 😍
vậy nếu dữ liệu nhận về được lấy từ reducer chứ k phải được truyền từ props thì có sử dụng React.memo được không anh
à nó còn tuỳ vào em dùng connect() HOC hay hook useSelector em nhen 😉
cơ mà react.memo() chỉ dùng khi cần thiết, ko cần apply cho tất cả em nhé
@@EasyFrontend dạ em dùng useSelector á anh, mỗi lần em set lại state trong reducer là nhưng trang không sử dụng state đó cũng re-render khiến css của em nó giật giật. Em thử thì thấy React.memo chỉ nhận sự thay đổi của props truyền vào chứ k thể nhận biết đc state lấy từ useSelector, mong anh cho em 1 giải pháp để khắc phục, em cảm ơn anh
Cho mình hỏi nếu check key và synmetrickey r thì chỉ cần lưu vào key thôi nhỉ
Yesss, hay quá Cường. Anh làm dư cái check á hihi, một check là đủ òi nè hihi Cảm ơn e đã phát hiện nhé Cường 😉
em mới xem khóa Js trên udemy, thấy a bảo có làm 1 dự án cuỗi khóa viết thuần, nhưng e chưa thấy nó xuất hiện trong chương. Khi nào mới được cập nhật đủ nhỉ, có tiền e xúc về cày :b
à gần tới rồi em nha, hiện đang ở chương 19 òi, mà em học tới chương 19 chắc cũng cả tháng đó 🤣
@@EasyFrontend em mua chỉ để ôn lại kiến thức thôi anh, chứ em học cơ bản về js rồi
yeah okie em nè, mà em học đi, có nhiều kiến thức nâng cao và chuyên sâu á, có thể em chưa biết đó, nhưng nếu em học thì hạ mình xuống, open mind để học đc nhiều nhất nha, đừng lướt và tua em sẽ miss rất nhiều thứ đó 😉
@@EasyFrontend kiến thức nâng cao nó ở chuong nào thế anh, em chưa mua khóa js chỉ vào ngắm bài các chương thôi :>
nó ở khắp nơi á em, ví dụ nè event loop, browser components, cấu trúc dữ liệu và giải thuật, binary tree, dom tree construction, ... em cứ từ từ thông thả nghiên cứu nhen hehe
Hay ha anh. Đúng là em chuyển sang hook em dính cái re-render nhiều này.mà anh ơi cho em hỏi khi em kết hợp hook với redux khi em dùng useEfffect để dispatch 1 cái action.n bắt truyền Props vào dependencies.nhưng mà truyền t propss vào thì lại re render liên tục.có cách nào để khắc phục không ạ anh.
à fix được nha Dũng ơi. Em có thể share code của em lên codesandbox được hk?
Có gì a review giúp cho 🙂
@@EasyFrontend anh ơi.anh thông cảm là em chưa gửi share code từ codesandbox bao giờ ạ .bây giờ em chỉ cần đem cái component đó lên codesandbox. thôi ạ.
Amazing !
hihi cảm ơn em nhiều nhé Thương 😍
A ơi theo e đc học ở class component thì khi gọi this.setState thì nó CHỈ chạy lại các JSX ở trong hàm render mà ko chạy lại cả App hay constructor, các function nằm trong App. Nhưng ở 13:50 a nói nó render lại cả App là function component, ko biết e có bị lỗi đâu ko :'(
À em cần lưu ý xíu, khi nói re-render thì nó chỉ render từ component hiện tại trở xuống, chứ ko phải lúc nào cũng render lại toàn bộ cái App nha, do mình code demo trực tiếp trên App nên nó render toàn bộ App thôi.
Với Class component, khi re-render, nó sẽ chạy lại hàm render()
Với Functional component, khi re-render, nó sẽ chạy lại toàn bộ function.
Em lưu ý sự khác nhau nha 😉
@@EasyFrontend a ơi e mới test thử thì bên class component khi re-render nó render cả constructor trong nó với render() lun a :D
@@igdev6095 à ko em nha, re-render nó ko chạy lại constructor() đâu nha, em bị nhầm gì rồi á.
Em có thể xem cái life cycle ở đây: projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
anh Hậu ơi , cho em hỏi cái này chúng ta có thể sử dụng để lưu kết quả lấy về từ API không anh :D vì cái ví dụ của anh là nó synchronous còn API là các tác vụ asynchronous và mỗi lần em lấy data từ API thì đều mất 2s để load dù em đã tối ưu hóa bằng pagination để giảm thiểu dữ liệu
hi em ơi, cái này thì anh ko nghĩ nên apply cho API request em nhen, tốt nhất thì nên để cho bên server họ cache nếu cần thiết nhé hehe
may quá, thì ra là cái tường bẩn, cứ tưởng màn hình bẩn cơ, chùi mãi ko sạch
anh ơi cho em hỏi với ạ, khi mình tạo component em hay tạo là file .js
em xem các video của anh thì thấy anh hay tạo .jsx
Dùng js/jsx thì 2 cái này thì có khác nhau nhiều không anh?
em cảm ơn ạ.
hi em, về cơ bản 2 file này nó đều hiểu và chạy được nha.
Nhưng rõ ràng component của em return một cái jsx, nên file đó chính xác là jsx nè.
Nên a đặt jsx cho tường minh, còn file nào chỉ toàn code js thì a sẽ dùng đuôi là js. 🙂
@@EasyFrontend em cảm ơn anh ạ
Cache này có bị mất khi tắt trình duyệt không anh?
à sẽ bị mất em nha 😉
làm 1 full react redux project đi bác :v
Minh Sơn Lê Yesss, mình đang plan để chuẩn bị tài liệu, xong rồi mình sẽ làm nhé heheee
@@EasyFrontend hóng bạn.
Phút 12:13 ;Nó so sanh virtual dom mới và virtual dom cũ. chứ đâu phải virtual dom và thằng real dom đâu anh. :(
ù chết, sorry em, em nói đúng rồi nha, cảm ơn em đã phát hiện nhé 😊
slide soạn bằng word hả a
Triều Nguyễn Tuấn à ko Triều ơi, a dùng markdown nhen 😉
Thế là luôn phải kết hợp useMemo và usecallback với React.memo hả a. Vì e thấy 2 thằng hook ko làm thay đổi dữ liệu kiểu tham chiếu nhưng không có react.memo thì dù props ko thay đổi vẫn bị rerender lại ạ?
hi Hiếu ơi,
cái useMemo và usecallback giúp em ko cần tính toán lại nếu dependencies ko thay đổi, kể cả khi re-render.
Còn cái React.memo() thì nó sẽ giúp mình ko gọi lại hàm render nếu có thấy props ko thay đổi.
Do vậy ko nhất thiết phải luôn kết hợp cả 2 cái này lại với nhau em nhé 😉
15:06 ở đây phần onClick mình thêm arrow function thì có fix được ko a?
hi Hiếu, ko được nha Hiếu ơi. Em mà dùng arrow function trong onClick, là nó luôn tạo một function mới anonymous đó Hiếu ơi. 🙂