So sánh useMemo và useCallback khác nhau gì?
HTML-код
- Опубликовано: 9 фев 2025
- Khi làm việc với React Hooks nhiều bạn hay nhầm lẫn khái niệm giữa useCallback và useMemo. Đừng lo lắng vì không chỉ riêng bạn mà có rất nhiều lập trình viên trong đó có mình đã phỉa mất nhiều thời gian để hiểu rõ sự khác biệt giữa chúng. Và bây giờ chúng ta sẽ cùng nhau tìm hiểu chi tiết nhé
📚 Kiến thức trong video
Giới thiệu kĩ thuật Memorization trong khoa học máy tính
useCallback là gì? Khi nào nên sử dụng
useMemo là gì? Khi nào nên sử dụng
Cách sử dụng React.memo
Điểm giống và khác nhau giữa useCallback và useMemo
🔗 Link tham khảo 🔗
Học useCallback: • Học useCallback - Reac...
Học useMemo: • Học useMemo - React Ho...
React Hooks Series: • Học useState - React H...
📢 Liên hệ với mình tại 📢
Facebook: / holetex
Tiktok: / holetex
Github: github.com/hol...
Facebook cá nhân: / minhtung09
Email: holetex@outlook.com
Website: holetex.com
🤝 Tham gia làm hội viên của kênh này để được hưởng đặc quyền:
www.youtube.co...
#holetex #reacthooks ##reactjs #react
công nhận càng ngày khả năng sư phạm của anh Tùng càng dễ hiểu. Từ việc tìm kiếm vd trực quan (fibonnaci) để tạo ra 1 nỗi đau thực tế, từ đó ng xem sẽ dễ nhận thấy lợi ích của nó hơn là việc chỉ nói lí thuyết 1 cách mơ hồ.
Hi vọng tương lai anh ra khóa React (các kiến thức nâng cao) bên Udemy, nhất định em sẽ pre-order trước ^^
dài hơn 20p nhưng không hề cảm thấy lãng phí 1 phút giây nào, tuyệt vời anh ơi!
A làm hẳn 1 series bài bản từ A-Z về react đi ạ, với lại những kiến thức thực tế khi làm việc với react ạ
Cảm ơn anh Tùng, xem xong clip + đọc docs em đã nhớ luôn chứ không còn mơ hồ. Tiện thể mở project cũ upgrade bằng những kỹ thuật này luôn 💙
mỗi video đều chất lượng quá, cảm ơn anh nhiều.
Video hay, dễ hiểu. Cảm ơn nhé
Hay quá. Thích quá. Dễ hiểu quá!
studio đẹp qá a ơi
Cảm ơn em
Cám ơn anh, siêu hữu ích ạ
A chỉnh ánh sáng để background tối tối hơn 1 chút là đẹp đó a. Vừa làm đèn phía sau nổi lên, vừa tập trung ánh sáng vào a hơn á. Với cái tủ phía sau nhìn như đang bị nghiêng, a chỉnh camera để cạnh tủ thẳng đứng là chuyên nghiệp vip pro luôn
Cảm ơn góp ý của em nhiều nhé ❤️
Hi vọng anh ra một vài video về react + typescript ạ
cái form bạn nên dùng để render kết quả result Fibonaci luôn thì demo tối ưu hơn
quá hữu ích
tuyệt vời admin ơi, nếu useMemo dùng thay thế cho useCallback đc thì dùng 1 cái thôi cho đỡ phức tạp và phải nhớ nhiều nhỉ :D
không phải tự dưng lại React lại đẻ ra useMemo và useCallback đâu bạn, admin có thể nói đúng ở khía cạnh 2 hooks đó thay thế nhau trong 1 vài trường hợp nhưng 2 hook này không thể thay thế hoàn toàn cho nhau, bạn nên tìm hiểu kĩ để dùng cả 2 cho hiệu quả thì tốt hơn.
Cái này tuỳ sở thích bạn nhé. Nhưng nên làm theo hướng dẫn sử dụng, useMemo để cache giá trị còn useCallback để cache callback. Người nào mới project đọc code dũng dễ hiểu hơn nữa
dễ hiểu quá a ạ ^-^
Anh giải thích rất dễ hiểu. Cảm ơn anh nhiều nhiều. Khi thực hành thì em có 2 câu hỏi không giải thích được. Mong anh giải thích giúp với ạ
1. Tại sao không sử dung React.meno() tại tất cả các component.
2. Em viết các hàm tính toán mất thời gian ra ngoài phạm vi component thì có sao không.
1. Nếu không sử lý các expensive function thì không nên dùng nha bạn tại vì sẽ làm tốn tài nguyên
2. không sao hết nha
Tóm tắt:
- useCALLBACK: Ghi nhớ 1 fuction ko thực thi nó, fuction này được truyền làm tham số cho component con
- useMEMO: Ghi nhớ trả về kết quả của 1 fuction
A dùng extension gì mà gợi ý hay thế a
Phút thứ 18:17 anh có nói là khi render lại thì nó sẽ tạo ra một vùng nhớ mới. Nếu xét trường hợp:
const dispatch = useDispatch();
khi em dùng useEffect bị yêu cầu truyền nó vào mảng dependency:
useEffect( callback có dùng dispatch, [ dispatch] ).
nếu mỗi lần render là tạo ra vùng nhớ mới, và "dispatch" cũng là kiểu tham chiếu nên lần render sau sẽ khác lần render trước thì sao callback trong useEffect chỉ chạy đúng 1 lần vậy anh.
Nếu em mở code của useDispatch lên thì em sẽ thấy nó cũng áp dụng các kĩ thuật cache để chỉ tham chiếu tới 1 vùng nhớ duy nhất em nhé.
những callback càng về cuối càng khó anh em ạ. Mình phải xem đi xem lại cả chục lần ở lần đầu học hooks, xong còn bị quên nữa chớ
Trong video, anh sử dụng extension nào mà có nhiều cái snippet hay vậy?
Cái này đi phỏng vấn là hỏi hoài, ng ta hay hỏi UseMemo và UseCallBack khác gì nhau, với lại đi làm sẽ liên tục dùng nó.
còn hỏi thêm gì nữa không bạn
@@MinhDucOfficialphân biệt 3 trường hợp depend của useEffect sẽ hoạt động như nào 😂
woww tuyệt
Trong thực tế thì có sử dụng hook này nhiều không anh ?
Trong thực tế xài nhiều em nhé. Nhưng như anh nói 2 hooks này để tối ưu hiệu năng nên khi project phải lớn đến 1 mức nhất định và cần tối ưu về performance thì mới cần áp dụng nhiều
Anh ơi anh Sơn Đặng có nói là mình chỉ dùng useCallback khi React.memo không giải quyết được vấn đề là không render lại componnet con đúng không anh . còn nếu trong component cha mà không có component con thì mình không cần dùng vì nó cũng thừa thãi đúng không anh . mong anh giải đáp thắc măc ạ
Đr componet không có quan hệ vs nhau thì dùng làm gì