Hehe cảm ơn bạn đã xem video của mình! ❤️ Cho mình xin hỏi bạn có đang dùng useCallback vs useMemo không? Nếu có thì dùng trong trường hợp nào vậy nè? 🙂
Em cảm ơn anh ạ, nhờ có những video như thế này của anh mà em có thêm rất nhiều kiến thức bổ ích cho nền tảng React của mình. Chúc anh sức khỏe và thanh công trong con đường sự nghiệp của mình ạ.
Học tới đây mới tiện cảm ơn a, nhờ a mà những ae trái ngành, ko có điều kiện như e mới đc học những kiến thức thực tế như này, mặc dù càng học càng thấy khó nhưng nhờ vậy mới cải thiện đc mindset của mình :D Nhân tiện e mún hỏi chưa có kt nào về Redux sau series này học lun Redux vẫn ổn phải ko a
hahaa rất vui vì các videos hữu ích với em nè 😍 Cảm ơn em đã ủng hộ kênh nhé ❤️ Em có thể xem thêm các nội dung khác ở đây nhé! www.ezfrontend.com/blog/tong-hop-tai-lieu-hay-tu-easy-frontend
hihi cảm ơn em nhiều nhiều nhen, nếu em muốn học cách tổ chức các modules trong một dự án thực tế của reactjs như thế nào luôn thì có thể tham khảo khoá học reactjs trên udemy của anh nhé 😍
yeahhh cảm ơn em nhiều Hùng ơi, hiện trên kênh có nhiều series rồi nè. Nếu em quan tâm có thể tham khảo thêm để tìm hiểu nhen! 😉 Có thắc mắc gì thì cứ trao đổi với a nhé!
hi Huỳnh, cái này thì anh hiện có làm trong khoá học reactjs trên udemy. Cơ bản là khi em có state được tính toán từ các state có sẵn từ redux, thì mình có thể dùng reselect để tính toán KQ và lưu lại, nó chỉ tính lại khi state phụ thuộc thay đổi. Nói cụ thể hơn là giỏ hàng đi Redux lưu danh sách các items trong giỏ hàng, nhưng ko lưu con số tổng tiền giỏ hàng Giờ mình sẽ dùng reselect createSelector() để giúp mình tính tổng tiền giỏ hàng từ danh sách các items trong giỏ hàng, và nó chỉ tính lại tiền khi danh sách các items trong giỏ hàng thay đổi :)
hi Trường, Về 2 cái hooks kia, để hôm nào có time a sắp xếp làm hen. Còn routing thì em tham khảo video này nha ruclips.net/video/mAhUJdf0Kug/видео.html 🙂
A ơi trong trường hợp data của Component xài useMemo đó có thể bị thay đổi, chẳng hạn như cart chẳng hạn, thì nếu mình chỉ muốn re-render khi biến cart thay đổi thì mình set: const data = useMemo(() => cart, [cart]); phải không ạ?
Dạ anh ơi cho em hỏi nếu dùng class component thì dùng cái gì để thay thế 2 hook này a. Em không có làm việc với class nên không rõ lắm. Mong a giải đáp. Em cám ơn!
Đã xem hết 15 video. Video rất hay và dễ hiểu đối với newbie như mình. Cảm ơn Hậu rất nhiều. Chúc Hậu sức khỏe và thành công. Sẵn cho mình hỏi. Bạn dùng phần mềm nào quay video vậy ạ?
Yeah cảm ơn bạn đã cày xuyên suốt series với mình nhé ❤️ Mình làm video với bộ công cụ này: - Camera: dùng điện thoại cá nhân iPhone X - Quay màn hình: dùng cái có sẵn của MacOS - QuickTime Player - Biên tập video thì bạn dùng cái nào tiện cho bạn Davinci Resolve hoặc Final Cut Pro (MacOS) Chúc bạn thật nhiều sức khoẻ nhé! 😉
à 2 ông này mình chỉ dùng khi thật sự cần thiết thôi em nhen, chứ ko dùng đại trà nhen Thắng. kentcdodds.com/blog/usememo-and-usecallback em đọc tham khảo thêm bài blog này của bác Kent nhen
useContext , useReducer , useImperativeHandle , useLayoutEffect, useDebugValue Mấy cái này có xem qua nhiều lần nhưng không hiểu A ơi. Có thể thêm 1 video ví dụ mấy cái này không Anh?
Cho em hỏi nếu không truyền array dependency thì nó có chạy không a? Có một anh hỏi em là useEffect và useCallback nó giống và khác gì. Em không diễn đạt được mặc dù đã sử dụng khá nhiều. Anh có thể giải thích giúp em không?
hi em, mình ko truyền deps nó vẫn chạy em nha, cơ mà nếu ko truyền thì em ko nên dùng nữa, vì lần nào re-render nó cũng chạy lại, thành ra mất đi tính hữu dụng của nó là hạn chế số lần tính toán lại khi ko cần thiết em nhen 😊
Cảm ơn anh về bài giảng nha anh. Như thế trong trường hợp mk sử dụng useCallback và useMemo rồi truyền props xuống component con mk vẫn phải sử dụng thêm React.memo nữa hớ anh... Có cách nào để khắc phục nó ko anh?.
à cái này thì chịu rồi em ơi 🙂 useCallback, useMemo giúp em memoized function/value để ko tạo ra tham chiếu mới khi ko cần thiết component cha re-render thì sẽ trigger component re-render, nếu em muốn khắc phục thì dùng React.memo để trường hợp props ko đổi nó sẽ ko re-renders, tuy nhiên hk phải component nào cũng cần dùng tới nhen 😉
Hi anh Hậu, anh cho em hỏi là khi có 1 component con re-render dựa vào props của component cha thì mình nên dùng useMemo hay useCallback để viết component con hả anh, cả 2 cách đều được nhưng em muốn hỏi nên dùng cách nào hơn ạ. Em cảm ơn anh
à anh thì ko dùng cả 2 em nhé, anh chỉ dùng khi thật sự cần thiết nhen 😉 em tham khảo bài blog này nhen, em sẽ hiểu đc khi nào nên dùng và có nên luôn dùng hay ko hehe kentcdodds.com/blog/usememo-and-usecallback
anh cho em hỏi là: 1. xài function inline thì có tương tự như useCallback ko ạ ? 2. tại sao xài class component thì inline lại rerender còn functional component thì ko ạ ?
hi Hoàng, 1. Function inline là nó sẽ được tạo mới mỗi lần re-render nhen. Còn useCallback nó chỉ tạo ra function mới khi dependencies thay đổi. Nên nếu giữa các lần renders mà dependencies ko thay đổi thì nó sẽ ko tạo ra function mới nha. 2. A chưa hiểu ý em lắm, nhưng cơ bản inline function --> luôn luôn tạo mới mỗi lần render dù là class hay functional component nha Hoàng Hi vọng giải đáp được thắc mắc của em 🙂
hi Công, có một cái hook nâng cao a có share trên Facebook mà chưa làm video 🙂 github.com/paulnguyen-mn/use-scroll-progress Em có thể tham khảo thêm hen. Phần nâng cao tiếp theo của hooks là trong series của Redux, mình sẽ dùng hooks để làm việc với Redux nè hihi
NBếu v thì 2 hook này giống useEffect anh nhỉ, khác là useEffect tác động lên component hiện tại, còn useCallback và useMemo để control các component trong component hiện tại mà mình có truyền props và mong muốn nó chỉ nhận props đó 1 lần, e hiểu v k biết đúng k ạ?
hi Châu ơi, nhìn theo cái dependencies thì nó hoạt động tương tự nhau, nhưng nó khác ở chỗ: - useEffect(): mình muốn làm gì trong đó cũng đc, có thể thay đổi state, hoặc ko thay đổi gì hết, hàm return() sẽ là hàm clean up. - useCallback(): cái này nó sẽ return về cho mình một function. - useMemo(): cái này nó sẽ return về cho mình một giá trị. 😉
Anh ơi. Nếu ko dùng useCallback, thì những lần tiếp theo function sẽ thay đổi tham chiếu, prop sẽ thay đổi, nhưng component có bị re-render lại ko? Vì react đang dùng VirtualDOM, mà chỉ có tham chiều function thay đổi, chứ component ko thay đổi gì cả.
hihi một câu hỏi hay nè Cường. Câu trả lời là CÓ re-render lại nhé Cường. Tuy nhiên sau khi hàm render() thực hiện xong, tới bước update DOM, ở đây có VirtualDOM nó sẽ so sánh, thấy ko thay đổi nó sẽ ko update DOM đâu nhé. 😉
Anh Hậu ơi, cho e hỏi React nó cache lại mấy cái kết quả render của bộ props ở bộ nhớ nào vậy anh, nếu lưu cache nhiều thì có làm nặng bộ nhớ đó không, có ảnh hưởng gì đến app của mình không ạ?
hi em ơi, về cơ bản thì sử dụng mấy cái này, nó tạo thêm một cache để lưu trữ kết quả trước đó, nên sẽ tốn thêm bộ nhớ hơn bình thường nha, nhưng mà cái này nhỏ quá, ko biết có ảnh hưởng gì hk? 😉
@@EasyFrontend OK Hậu. Mình rất mong các video của Hậu ra tiếp theo. rất hay và bổ ích cho mình. Anh Hùng đâu phải là người đi cứu cả thế giới! thank All
hahaa anh mới đổi qua laptop khác, anh đang vật vã setup Bảo ơi, vẫn gặp một số issues hihi, a đang xử lý nó, hi vọng tuần này sẽ xong và có được video đầu tiên ở laptop mới hihi
Em đang cực kì confused, khi sử dụng với Class, thì khai báo arrow function là sẽ không bị tình trạng recreate lại khi rerender. Nhưng với Hook thì sẽ gặp tình trạng này, nhưng dùng useCallback thì lại tốn cost về memorization. Vậy có phải vs case này, thì Hook không làm tốt được như Class, và mình dùng Hook thì phải chấp nhận việc này hay sao ạ?
Nếu nó hạn chế số lần rerender và tính toán lại thì có lý do gì mà mình ko sử dụng ở toàn bộ không anh. Cái mà anh bảo virtual dom các thứ kp render lại dom nó đâu có đúng trong react native. Mong anh giải thích thêm tại sao mình ko nên dùng cho toàn bộ component. Khi có 1 tính năng tốt như vậy.
hi Tùng, performance optimization có cái giá của nó, nếu mình apply không đúng nơi đúng chỗ nó thẩm chí làm chậm hơn việc không dùng. Ví dụ ở đây 2 cái hooks useCallback và useMemo nó sử dụng kĩ thuật memoization, không phải lúc nào mình cũng cần đụng tới kĩ thuật này. Ví dụ: tính toán add(a, b) --> bạn có nghĩ hàm này nên áp dụng memoization không? Rõ ràng là không, vì áp dụng vào thì việc bạn làm còn nhiều hơn 🙂 Cho nên một câu nói rất hay từ bài blog bên dưới mà mình rất thích đó là: "Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost." Link tham khảo: kentcdodds.com/blog/usememo-and-usecallback Đừng apply những kĩ thuật optimization vô tội vạ, nó sẽ khiến mọi thứ rối hơn, tệ hơn, chứ ko tốt hơn nè 🙂 Nên hãy hiểu và apply đúng nơi đúng chỗ thôi nhé hihi
anh ơi cho em hỏi em bị đang bị cái bug re-rendering như sau . Trong useEffect em chạy một cái map để duyệt item thỏa mãn điều kiện, với mỗi item thỏa mãn em lại đẩy vào chuỗi B setB((B) => [...B, item]) . Chạy hết map em lại setA (B) và dependencies của em là chuỗi A, vậy là mỗi lần chuỗi B thay đổi dẫn đến A cũng thay đổi luôn nên re-rendering vô tận. nếu em để denpendencies rỗng thì nó render đúng 1 lần nhưng UI nhận data của A lại không hiện ra liền, mà lần render thứ 2 nó mới xuất hiện. Mong anh giải đáp thắc mắc giúp em ạ :3
Em có một button khi click reset về 0 thì C2 không rerender. Còn C1 thì vẫn renreder mặc dù state sau những lần click luôn bằng 0 có cách nào để fix không anh nhỉ?
Hehe cảm ơn bạn đã xem video của mình! ❤️
Cho mình xin hỏi bạn có đang dùng useCallback vs useMemo không?
Nếu có thì dùng trong trường hợp nào vậy nè? 🙂
Theo em thì dùng useCallback khi có param truyền vào còn còn dùng useMemo được hết
à okie Đạt, mà thực tế em đã apply vào trường hợp nào chưa Đạt hen? 🙂
@@EasyFrontend em có đọc qua thì khi dùng useMemo có param truyền vào là một function thì vẫn bị re-render
Dìa diaaa, xong list này rồi, anh giảng rất hay. Có gì thắc mắc thì anh cũng trả lời hết, cảm ơn anh rất nhiều
Wohoo tuyệt vời Tú ơi! 🎉 Chúc em enjoy học tập series mới nhé hihi 😊
Tóm lại là useCallback được dùng cho tính toán hàm, còn useMemo dùng cho biến để lưu trữ giá trị. hehe cũng dễ hiểu. Cảm ơn anh Hậu
yeah có một lưu ý nhỏ là mình chỉ dùng khi thật sự cần thiết thôi em nhen
ref: kentcdodds.com/blog/usememo-and-usecallback
@@EasyFrontend dạ em cảm ơn anh Hậu
Em đã cày gần hết các video trong dsach các video của a 🤩🤩
u trời, quá xịn luôn em, hi vọng các videos hữu ích với em 😊
Em cảm ơn anh ạ, nhờ có những video như thế này của anh mà em có thêm rất nhiều kiến thức bổ ích cho nền tảng React của mình. Chúc anh sức khỏe và thanh công trong con đường sự nghiệp của mình ạ.
Yeahhhh cảm ơn Tân rất nhiều, a rất vui khi nhận được phản hồi từ em. Chúc em thật nhiều sức khoẻ nhen 😉
Học tới đây mới tiện cảm ơn a, nhờ a mà những ae trái ngành, ko có điều kiện như e mới đc học những kiến thức thực tế như này, mặc dù càng học càng thấy khó nhưng nhờ vậy mới cải thiện đc mindset của mình :D
Nhân tiện e mún hỏi chưa có kt nào về Redux sau series này học lun Redux vẫn ổn phải ko a
hehe ngon lành, cảm ơn em đã dành thời gian học trên kênh của anh nha.
Sau series hooks, em có thể học tiếp series về Redux nha 😉
Hãy làm tốt....... đi. Truyền cảm hứng quá anh ơi, giờ rãnh mới cày được mấy video trong series này hihi
hihi cảm ơn em nhiều Bảo oiwiiiii 😍 Trong quá trình cày mà có gì ko hiểu thì cứ thoải mái trao đổi với a nha hehee
kiến thức của anh chia sẻ rất chi tiết và bổ ích, cám ơn anh Hậu nhiều ha !
yeah cảm ơn em nhiều nhiều nhé Huy ơi 😍
Cảm ơn anh đã dành thời gian và công sức chia sẻ kiến thức tới mọi người :D.
hihi cảm ơn Trung nhiều nha, thật ra cũng đuối thiệt, mà mn nhiệt tình xem nên cũng ráng làm nè hihi 😍
Cảm ơn anh nhiều vì series rất là dễ hiểu ạ, vừa xem vừa cười vừa nói theo anh luôn :v
hahaa rất vui vì các videos hữu ích với em nè 😍 Cảm ơn em đã ủng hộ kênh nhé ❤️
Em có thể xem thêm các nội dung khác ở đây nhé!
www.ezfrontend.com/blog/tong-hop-tai-lieu-hay-tu-easy-frontend
@@EasyFrontend Dạ em cảm ơn anh ạ!
Anh dạy dễ hiểu quá hehe mong anh sớm dạy thêm những phần còn lại và thêm chút hook nâng cao ạ
hihi cảm ơn em nhiều nhiều nhen, nếu em muốn học cách tổ chức các modules trong một dự án thực tế của reactjs như thế nào luôn thì có thể tham khảo khoá học reactjs trên udemy của anh nhé 😍
hay quá anh ơi. kiến thức bổ ích ạ. hóng thêm những clip về authentication + authorize
hihi cảm ơn em Thược nhiều nhé, phần auth dự định sẽ làm trong project thực tế nè 😉
Bổ ích quá ạ. cảm ơn anh nhiều. Mong anh ra series đều đều
hihi cảm ơn em nhiều nhé Thành 😉 A sẽ cố gắng giữ lịch ra video vào 3 buổi tối 2, 4, 6 nè 😉
Like!!! video của a rất hay, mong a ra video làm một project để cho mọi người hiể rõ hơn
hi Khánh ơi, cái series redux-photo-app là project thực tế của reactjs đó Khánh, em có thể tham khảo thêm nghen hehee
Cảm ơn anh Hậu nhiều nhé, những video rất hữu ích ạ.
yeah yeah cảm ơn em nhiều nhé Thành ơi 😍
Lần đầu xem video của anh, cách anh nói rất hay :D
yeahhh cảm ơn em nhiều Hùng ơi, hiện trên kênh có nhiều series rồi nè. Nếu em quan tâm có thể tham khảo thêm để tìm hiểu nhen! 😉 Có thắc mắc gì thì cứ trao đổi với a nhé!
A làm thêm mấy Hooks còn lại đi anh . A nói hay và dễ hiểu lắm ạ !!
Yeahhhh cảm ơn em nhiều nhé Anh ơi, anh đang tập trung làm cho xong khoá học ReactJS, xong a sẽ quay lại với mọi người nhé hihi 😊
Document CỦA A DỄ HIỂU GHÊ
quớ dễ hiểu , thanks a daiiiii
Hay qá anh ơi!
hehe cảm ơn em nhiều nhiều nhé Thiện 😍
Bài giảng rất hay, cảm ơn bạn.
Yeah cảm ơn a Toản nhiều ạ! 😍
Cảm ơn em, rất hay.
dạ e cảm ơn a Tường nhiều nhé 😉
Anh có thể hướng dẫn về reselect không ạ, em đọc doc của React Hook nhưng chưa hiểu về cách áp dụng trong thực tế lắm. Cám ơn anh
hi Huỳnh, cái này thì anh hiện có làm trong khoá học reactjs trên udemy.
Cơ bản là khi em có state được tính toán từ các state có sẵn từ redux, thì mình có thể dùng reselect để tính toán KQ và lưu lại, nó chỉ tính lại khi state phụ thuộc thay đổi.
Nói cụ thể hơn là giỏ hàng đi
Redux lưu danh sách các items trong giỏ hàng, nhưng ko lưu con số tổng tiền giỏ hàng
Giờ mình sẽ dùng reselect createSelector() để giúp mình tính tổng tiền giỏ hàng từ danh sách các items trong giỏ hàng, và nó chỉ tính lại tiền khi danh sách các items trong giỏ hàng thay đổi :)
Chào anh! Đây là video cuối cùng của phần hooks hả anh?
hi Mẫn, cái này chỉ là tạm hết phần cơ bản thôi nè. Anh sẽ làm tiếp một series khác chứa phần hooks nâng cao hehee
Anh ơi anh hương dẫn về useContext và useReducer đi ạ. Và sử dụng react-router-dom để setup 1 project đi ạ
hi Trường,
Về 2 cái hooks kia, để hôm nào có time a sắp xếp làm hen.
Còn routing thì em tham khảo video này nha ruclips.net/video/mAhUJdf0Kug/видео.html 🙂
Easy Frontend mình đặt router như thế nào cho 2 phần UI và Admin trong 1 project vậy a
a ra tiếp đi anh ơi ♥
hihi hiện anh đang cày series typescript em ơi, có dịp a quay lại sẽ làm thêm nhen hehe
Cám ơn anh, bài giảng hay quá ạ!!!!
ngon lành, cảm ơn em nhé 😍
seri hay quá. Cảm ơn bác nhiều nhé!
yeah rất vui khi video hữu ích cho mn nè 😍
cám ơn anh
Bạn ơi!!! làm tiếp 1 video về useReducer đi
Dung Tri hihi okie bạn nhé, mà mình sẽ làm cái này ở series nâng cao nhen 😉
chưa có bài về useReducer à anh 😍😍😍
haha chưa em ơi, a chưa quay về lại chủ đề này haha
Hóng a hướng dẫn làm 1 project bằng reactjs 😁
hehe Hậu ơi, cái series redux photo app là project thực tế đó nè hehe, hoặc tuần sau a ra khoá reactjs trên Udemy là full options 😍
@@EasyFrontend Dạ a..Lót dép đợi khóa của a =)
đã xem hết . Thanks anh
Video rất hay , cảm ơn anh
hay quá a ơi. mà PV junior có hỏi về 2 cái này ko a ?
hehee chuyện gì cũng có thể xảy ra em ơi =))) tuỳ ông phỏng vấn thôi à hehee
Anh Hậu ơi làm về Nextjs đi anh.
à sau series typescript em nha, a đang làm ts, em có thể đăng ký fan cứng để xem đc full series em nhen 😍
A ơi trong trường hợp data của Component xài useMemo đó có thể bị thay đổi, chẳng hạn như cart chẳng hạn, thì nếu mình chỉ muốn re-render khi biến cart thay đổi thì mình set:
const data = useMemo(() => cart, [cart]);
phải không ạ?
Dạ anh ơi cho em hỏi nếu dùng class component thì dùng cái gì để thay thế 2 hook này a. Em không có làm việc với class nên không rõ lắm. Mong a giải đáp. Em cám ơn!
hình như là ko có cái tương đương em nhen hehe
Đã xem hết 15 video. Video rất hay và dễ hiểu đối với newbie như mình. Cảm ơn Hậu rất nhiều. Chúc Hậu sức khỏe và thành công.
Sẵn cho mình hỏi. Bạn dùng phần mềm nào quay video vậy ạ?
Yeah cảm ơn bạn đã cày xuyên suốt series với mình nhé ❤️
Mình làm video với bộ công cụ này:
- Camera: dùng điện thoại cá nhân iPhone X
- Quay màn hình: dùng cái có sẵn của MacOS - QuickTime Player
- Biên tập video thì bạn dùng cái nào tiện cho bạn Davinci Resolve hoặc Final Cut Pro (MacOS)
Chúc bạn thật nhiều sức khoẻ nhé! 😉
ra thêm video về hook đi anh, khá hay.
hihi series này tạm hết em nhen, em có thể xem thêm series react typescript + saga em nhé, bao xịn nè hihi
Em cảm ơn anh về video ạ, anh cho em hỏi khi sử dụng 2 ông này thì có hạn chế hay bất lợi gì không ạ ?
à 2 ông này mình chỉ dùng khi thật sự cần thiết thôi em nhen, chứ ko dùng đại trà nhen Thắng.
kentcdodds.com/blog/usememo-and-usecallback
em đọc tham khảo thêm bài blog này của bác Kent nhen
@@EasyFrontend dạ, em cảm ơn a ạ
useContext , useReducer , useImperativeHandle , useLayoutEffect, useDebugValue Mấy cái này có xem qua nhiều lần nhưng không hiểu A ơi. Có thể thêm 1 video ví dụ mấy cái này không Anh?
hi em ơi, mấy cái này hơi nhiều, chắc để chia ra nhiều videos nè hehe, để a note lại, bổ sung thêm mấy cái này nhé hehe
em đã xem đến đây mong anh làm thêm nói kĩ hơn về useRef e hơi mơ hồ nó và 1 cái mới ra gần đây là suspense và lazy được không a
em cảm ơn nhiều
hi Nam ơi, anh có một video nói về useRef, em check thử nha. Còn suspense vs lazy là bên phần routing rồi nè hehe 😉
Tức là cách dùng của 2 cái là gần giống nhau, chỉ khác cái giá trị trả về
Anh có làm video useContext với useReducer không anh
hi Nam ơi, hiện tại a chưa có video về cái này òi hihi, có thời gian a sẽ sắp xếp làm thêm nghen hihi
cảm ơn anh , anh nói hay qua ạ
hihi cảm ơn em nhiều Vũ ơi, series hooks này có giúp ích được nhiều cho em hk Vũ? 🙂
cám ơn anh
Lê Bá Ngữ hehee e có học được gì mới từ video hk Ngữ? 🙂
Hay quá anh ơi!.
hehee cảm ơn em nhiều Anh ơi!!! 😍Em có học được gì mới từ video hk Anh? hehe
@@EasyFrontend Học được cũng kha khá à Anh.
Vừa coi React.memo xong qua coi liên tục clip này cho nóng hhaha
hahaa xịn xò quá luôn =)))) em có học được gì mới hk e ơi? 😉
Easy Frontend e học dần dần cũng dc kha khá thứ đó a :))) hóng ko biết các hook sau là gì
@@MynhDaiK hahaa hay quá em, rất vui khi nghe em học được nhiều thứ từ các videos của anh nè 😉
hay quá a ơi, hôm nào a làm về react-router đi ạ
hi Linh, trong bài Tổ chức file của series Redux project sẽ có phần này nhen. Em check trên kênh a thử nhé hihi
@@EasyFrontend học xong 15 bài này là mình qua playlist ReduxTookit hả a?
Tuan Dinh à đúng rồi nha Tuấn ơi 😉
a nói rõ hơn 1 chút về React.memo vs useCallback vs useMemo đi ạ
Tuấn Lường Viết hi em, cho a hỏi là hiện tại e hk rõ khúc nào e hen? 🙂
@@EasyFrontend em muốn so sánh rõ hơn thôi ạ
Anh Hậu ơi anh có thể có ví dụ và nói rõ hơn về vấn đề này chút được không anh :v
hihi okie Hoàng nha, để khi back về custom hook nâng cao, a sẽ nói lại một vài ví dụ sử dụng 2 ông thần này hehe
Cho em hỏi nếu không truyền array dependency thì nó có chạy không a? Có một anh hỏi em là useEffect và useCallback nó giống và khác gì. Em không diễn đạt được mặc dù đã sử dụng khá nhiều. Anh có thể giải thích giúp em không?
hi em, mình ko truyền deps nó vẫn chạy em nha, cơ mà nếu ko truyền thì em ko nên dùng nữa, vì lần nào re-render nó cũng chạy lại, thành ra mất đi tính hữu dụng của nó là hạn chế số lần tính toán lại khi ko cần thiết em nhen 😊
Đã xong video cuối cùng về react hook, quay lại udemy thôi
lol 🤣
@@EasyFrontend em cũng quay lại udemy đây :>
hay anh ơi
Em học cái này lần thứ n rồi. Cứ bị lộn memo với callback hiu hiu
😅 quyết tâm học lần nữa rồi hk nhầm nữa em nha 😉
hay quá anh :3
❤️
có nên đưa onChange của 1 input vào useCallback không anh?
hi em, anh thấy thường là ko cần thiết e nhen
Anh ơi ví dụ về useCallback có dependencies với anh ơi.
hihi nhất định, a sẽ back lại với nó ở series nâng cao của hooks nhen hihi
Anh Hậu ơi tiếp tục ra video về Hook nữa đi anh
hahaa okie em nha Sơn ơi, để a ráng hoàn thành khóa học reactjs xong back lại với series này mà nâng cao lên khà khà
Anh Hậu ơi 2021 rồi em hóng anh làm video useReducer với ạ
yeah cảm ơn em nhiều nhé Dương ơi 😉Đã noted em nghen, a đã cho vào queue vào video hehe
@@EasyFrontend respect ❤️
hay quá a
hihi cảm ơn em nhiều nhé 😉
Cảm ơn anh về bài giảng nha anh. Như thế trong trường hợp mk sử dụng useCallback và useMemo rồi truyền props xuống component con mk vẫn phải sử dụng thêm React.memo nữa hớ anh... Có cách nào để khắc phục nó ko anh?.
à cái này thì chịu rồi em ơi 🙂
useCallback, useMemo giúp em memoized function/value để ko tạo ra tham chiếu mới khi ko cần thiết
component cha re-render thì sẽ trigger component re-render, nếu em muốn khắc phục thì dùng React.memo để trường hợp props ko đổi nó sẽ ko re-renders, tuy nhiên hk phải component nào cũng cần dùng tới nhen 😉
@@EasyFrontend dạ vâng em hiểu rồi ạ.
Tks anh
cảm ưn anh :D
khi nào tiếp tục series này anh ơi
hihi chưa biết nữa Tùng ơi =))), giai đoạn này anh hơi sml với công việc nè hehe
Hi anh Hậu, anh cho em hỏi là khi có 1 component con re-render dựa vào props của component cha thì mình nên dùng useMemo hay useCallback để viết component con hả anh, cả 2 cách đều được nhưng em muốn hỏi nên dùng cách nào hơn ạ. Em cảm ơn anh
à anh thì ko dùng cả 2 em nhé, anh chỉ dùng khi thật sự cần thiết nhen 😉
em tham khảo bài blog này nhen, em sẽ hiểu đc khi nào nên dùng và có nên luôn dùng hay ko hehe
kentcdodds.com/blog/usememo-and-usecallback
@@EasyFrontend hehe thanks anh ạ :D
anh cho em hỏi là:
1. xài function inline thì có tương tự như useCallback ko ạ ?
2. tại sao xài class component thì inline lại rerender còn functional component thì ko ạ ?
hi Hoàng,
1. Function inline là nó sẽ được tạo mới mỗi lần re-render nhen. Còn useCallback nó chỉ tạo ra function mới khi dependencies thay đổi. Nên nếu giữa các lần renders mà dependencies ko thay đổi thì nó sẽ ko tạo ra function mới nha.
2. A chưa hiểu ý em lắm, nhưng cơ bản inline function --> luôn luôn tạo mới mỗi lần render dù là class hay functional component nha Hoàng
Hi vọng giải đáp được thắc mắc của em 🙂
Khi nào có series nâng cao vậy ạ
hi Công, có một cái hook nâng cao a có share trên Facebook mà chưa làm video 🙂
github.com/paulnguyen-mn/use-scroll-progress
Em có thể tham khảo thêm hen.
Phần nâng cao tiếp theo của hooks là trong series của Redux, mình sẽ dùng hooks để làm việc với Redux nè hihi
Thanks , nice video
NBếu v thì 2 hook này giống useEffect anh nhỉ, khác là useEffect tác động lên component hiện tại, còn useCallback và useMemo để control các component trong component hiện tại mà mình có truyền props và mong muốn nó chỉ nhận props đó 1 lần, e hiểu v k biết đúng k ạ?
hi Châu ơi, nhìn theo cái dependencies thì nó hoạt động tương tự nhau, nhưng nó khác ở chỗ:
- useEffect(): mình muốn làm gì trong đó cũng đc, có thể thay đổi state, hoặc ko thay đổi gì hết, hàm return() sẽ là hàm clean up.
- useCallback(): cái này nó sẽ return về cho mình một function.
- useMemo(): cái này nó sẽ return về cho mình một giá trị.
😉
Anh ơi. Nếu ko dùng useCallback, thì những lần tiếp theo function sẽ thay đổi tham chiếu, prop sẽ thay đổi, nhưng component có bị re-render lại ko? Vì react đang dùng VirtualDOM, mà chỉ có tham chiều function thay đổi, chứ component ko thay đổi gì cả.
hihi một câu hỏi hay nè Cường.
Câu trả lời là CÓ re-render lại nhé Cường.
Tuy nhiên sau khi hàm render() thực hiện xong, tới bước update DOM, ở đây có VirtualDOM nó sẽ so sánh, thấy ko thay đổi nó sẽ ko update DOM đâu nhé. 😉
Anh Hậu ơi, cho e hỏi React nó cache lại mấy cái kết quả render của bộ props ở bộ nhớ nào vậy anh, nếu lưu cache nhiều thì có làm nặng bộ nhớ đó không, có ảnh hưởng gì đến app của mình không ạ?
hi Trí ơi, cái này em tìm hiểu ông thần Virtual DOM nhé, coi cách nó xử lý ra sao nhen hehe
mình có thể vừa dùng React.memo() và useMemo hay useCallback không anh, hay chỉ cần dùng 1 trong 2 thôi ?
hi Duy ơi, cái này mình có thể dùng kết hợp với nhau nhé, tùy trường hợp thôi nhé, chứ không có cấm kị kết hợp với nhau nghen hihi
@@EasyFrontend cám ơn anh nha
hay lam
có phải dùng nhiều useCallback với useMemo sẽ ngốn bộ nhớ hơn không anh
hi em ơi, về cơ bản thì sử dụng mấy cái này, nó tạo thêm một cache để lưu trữ kết quả trước đó, nên sẽ tốn thêm bộ nhớ hơn bình thường nha, nhưng mà cái này nhỏ quá, ko biết có ảnh hưởng gì hk? 😉
Cũng lâu rồi mà ko thấy @easy frontend ra video 16
hihi sr Thuỷ, gần cuối năm công việc hơi sml tí, mình chưa có nhiều time trở lại với RUclips nè hihi 😉
@@EasyFrontend OK Hậu. Mình rất mong các video của Hậu ra tiếp theo. rất hay và bổ ích cho mình. Anh Hùng đâu phải là người đi cứu cả thế giới! thank All
Anh ơi anh làm về filter data ở react hook đi ạ , cám ơn anh nhìu , hihi
tân Phúc hihi cảm ơn rm, anh có làm phần đó ở bên useEffect nè, e check lại các videos bữa trước nha 😉
@@EasyFrontend vâng
em bấm like share bấm luôn cái chuông mà anh vẫn chưa ra clip mới @@
hahaa anh mới đổi qua laptop khác, anh đang vật vã setup Bảo ơi, vẫn gặp một số issues hihi, a đang xử lý nó, hi vọng tuần này sẽ xong và có được video đầu tiên ở laptop mới hihi
@@EasyFrontend mong đợi :v từng ngày
good video
❤️
ủa có video tiếp theo nào đâu ta
à sr em, đợt đó anh làm xong bận, nên hk có làm nữa hihi, series này tới đây là ngưng rồi em nhen hehee
@@EasyFrontend kkkk, vậy em xem típ series redux
Em đang cực kì confused, khi sử dụng với Class, thì khai báo arrow function là sẽ không bị tình trạng recreate lại khi rerender. Nhưng với Hook thì sẽ gặp tình trạng này, nhưng dùng useCallback thì lại tốn cost về memorization.
Vậy có phải vs case này, thì Hook không làm tốt được như Class, và mình dùng Hook thì phải chấp nhận việc này hay sao ạ?
hi Thành ơi, em có thể tạo một codesandbox.io rồi ví dụ trên đó cho a review giúp e được không? 🙂 Có thể em bị hiểu sai một ý nào đó ở đây 😉
Em rất thích phần custom hooks ! Xong phần hooks cơ bản này có phần hooks nâng cao ko anh Hậu?
Châu Minh Phúc à có Phúc ơi, xong callback này là tới mấy custom hook hay hay hehee 😉
8:15 nó trả về cái mảng cũ. còn dữ liệu thì có thể thay đổi đúng k a nhỉ?
hi Tuân ơi, dữ liệu nó cũng ko thay đổi luôn em nha hehe
Đến khi nào dependencies thay đổi nó mới tạo ra cái mảng mới cho mình 😉
@@EasyFrontend af ok. cam on a
Nếu nó hạn chế số lần rerender và tính toán lại thì có lý do gì mà mình ko sử dụng ở toàn bộ không anh. Cái mà anh bảo virtual dom các thứ kp render lại dom nó đâu có đúng trong react native. Mong anh giải thích thêm tại sao mình ko nên dùng cho toàn bộ component. Khi có 1 tính năng tốt như vậy.
hi Tùng, performance optimization có cái giá của nó, nếu mình apply không đúng nơi đúng chỗ nó thẩm chí làm chậm hơn việc không dùng. Ví dụ ở đây 2 cái hooks useCallback và useMemo nó sử dụng kĩ thuật memoization, không phải lúc nào mình cũng cần đụng tới kĩ thuật này.
Ví dụ: tính toán add(a, b) --> bạn có nghĩ hàm này nên áp dụng memoization không?
Rõ ràng là không, vì áp dụng vào thì việc bạn làm còn nhiều hơn 🙂
Cho nên một câu nói rất hay từ bài blog bên dưới mà mình rất thích đó là: "Performance optimizations are not free. They ALWAYS come with a cost but do NOT always come with a benefit to offset that cost."
Link tham khảo: kentcdodds.com/blog/usememo-and-usecallback
Đừng apply những kĩ thuật optimization vô tội vạ, nó sẽ khiến mọi thứ rối hơn, tệ hơn, chứ ko tốt hơn nè 🙂 Nên hãy hiểu và apply đúng nơi đúng chỗ thôi nhé hihi
@@EasyFrontend là do mỗi lần mình dùng memoization nó sẽ tốn thêm cache để lưu dữ liệu sau mỗi lần pk a ?
Khanh Duy à nó vừa lưu vừa tốn thêm xử lý nữa đó Duy, nên những tác vụ đơn giản + memoization vào chỉ thêm cồng kềnh chứ hk nhanh hơn nè 🙂
1 bài hay.
Vi vu duc hehe cảm ơn em nhiều nhé Đức 😉
👍
easy front end
🥰🥰🥰🥰
hihi
anh ơi cho em hỏi em bị đang bị cái bug re-rendering như sau .
Trong useEffect em chạy một cái map để duyệt item thỏa mãn điều kiện, với mỗi item thỏa mãn em lại đẩy vào chuỗi B setB((B) => [...B, item]) . Chạy hết map em lại setA (B) và dependencies của em là chuỗi A, vậy là mỗi lần chuỗi B thay đổi dẫn đến A cũng thay đổi luôn nên re-rendering vô tận.
nếu em để denpendencies rỗng thì nó render đúng 1 lần nhưng UI nhận data của A lại không hiện ra liền, mà lần render thứ 2 nó mới xuất hiện. Mong anh giải đáp thắc mắc giúp em ạ :3
hi Duy ơi, để cho chắc, em tạo một cái code snippet cho cái code của component đó, rồi send anh cái link anh xem được không? 🙂
@@EasyFrontend codepen.io/emonno13/pen/dyYpQvd
@@EasyFrontend Dạ anh ơi review giúp em ạ .
@@EasyFrontend À em fix dc rồi ^^ em ko setState trong map nữa mà em dùng biến tạm để lưu nó và trả về empty dependencies
Khanh Duy lol hay quá, a còn chưa review nữa =)), vậy là bữa sau bí em cứ hỏi anh, e trình bày xong là em sẽ tự trả lời được heheee
Hi anh em có gặp một problem ntn a.
export default function () {
const [state] = useContext(RandomNumberContext);
const num = useMemo(() => state.num, [state.num]);
console.log('Always rerender')
return (
{num};
)
}
export default function () {
const [state] = useContext(RandomNumberContext);
const { num } = state;
return useMemo(() => {
console.log('Only rerender when change number')
return (
{num};
)
}, [num])
}
Em có một button khi click reset về 0 thì C2 không rerender. Còn C1 thì vẫn renreder mặc dù state sau những lần click luôn bằng 0 có cách nào để fix không anh nhỉ?
ọc sorry em Tuyền, anh bị miss tin nhắn của em. Em xử lý được vấn đề chưa Tuyền 🙂Nếu vẫn chưa thì ping anh bên Facebook chat nha Tuyền 🙂
@@EasyFrontend Thanks anh ạ. Thấy có mấy bài viết họ sử lí theo C2 nên em loại C1 anh ạ.
like cái fix bug song xem =))
khà khà fan ruột =)))
xong 2 thằng này apply facebook được chưa a 😂😂😂😂😂😂
I'm VuCms 🤣 🤣🤣🤣🤣 Facebook Google gì chơi tới đi em 😂🤣😂
@@EasyFrontend z là hết hooks rồi à a
@@ImVuCms à chưa Vũ ơi, vẫn còn hehe này mới phần cơ bản thôi mà. Mình làm series redux xong, tiếp tục các hooks nâng cao khà khà 😉