useCallback() hook | Tránh tạo ra hàm mới không cần thiết với useCallback()

[@NguyenTruong-gm1ep]

em đã đọc rất nhiều về useCallback rồi mà vẫn chưa hiểu lắm, sau khi xem video này em mới thật sự hiểu về nó. Cảm ơn anh rất nhiều

[@kbietten]

Hay quá anh ơi, trước giờ hóa ra e chưa hiểu bản chất thật sự

[@huylethe5406]

anh giải thích phải nói là đỉnh của đỉnh, rất dễ hiểu

[@vietanhtvt]

Anh Sơn giảng hay quá

[@NamangMinh1]

BAO GIỜ EM ĐẾN NHÀ ANH SƠN HỌC CHO HIỂU LUÔN TẠI CHỖ.ưỚC GÌ EM ĐƯỢC ĐẾN NHÀ ANH SƠN

[@duyphan2919]

em fix bug mãi ko được. Coi video anh Sơn là fix dc ngay. Cảm ơn anh

[@cuocsongtuoidep91]

Giải thích dễ hiểu, tường tận, tỉ mỉ. Cảm ơn bạn. Bạn nghĩ sao nếu đưa ví momo lên để mọi người donate? (chứ visa nhiều người ko có)

[@LapTrinhQuaNhanh]

Chuẩn

[@attien1607]

Chào anh Sơn xem sớm nè hí hí

[@huy19437]

Anh làm thêm 1 ví dụ trong video tiếp theo về sử dụng array deps trong useCallback() đi ạ

[@LapTrinhQuaNhanh]

Đặt gạch xếp hàng

[@sonlengoc948]

@@LapTrinhQuaNhanh anh ấy chưa làm đúng k bạn

[@LapTrinhQuaNhanh]

I have no idea

[@quocnamnguyen6244]

Vậy là dùng useCallback ở component cha thì phải bắt buộc sài memo ở component con hả mọi người ?

[@angNguyen-yr7qc]

biến nguyên thủy như biến thì sẽ lưu trong stack , còn hàm sẽ lưu trong memory heap. Z mỗi lần re-render App thì nó chỉ re-render lại cái heap khiến cho tham chiếu bị thay đổi thôi à a.

[@xuanhuynguyen3203]

=)) đùa xem 1 hồi thấy memo hơi khó hiểu xong anh nói nó tương đương PureComponent cái hiểu luôn

[@tan2cang93]

giờ mới bít thêm cái trò phải gắn thêm memo vào mới dc

[@NguyenMinh-hy7lt]

Nếu component là 1 cái list thì sao zậy anh?

[@tripham8864]

Cho em hỏi nếu trong useEffect() gọi function bên ngoài thì phải dùng useCallback(). Trường hợp này có coi là lạm dụng ko ạ

[@HaoNguyen-br9hp]

cho em hỏi 1 trang web có thể vừa chứa node js và chứa cả react js đc ko ạ

[@nbduc]

Khá giống useRef nếu không có deps array nhỉ

[@tuananhnguyenang7838]

video dự án tiktok a dự định bao giờ upload ạ?

[@anhtuanle4991]

Cảm giác như thằng callback này nó kết hợp giữa việc lưu tham chiếu của useRef và phụ thuộc vào despenence của useEffect nhỉ mn

[@quannguyenhoang7246]

Hay quá anh oi

[@yashainu626]

cho e hỏi là nếu component con sử dụng memo thì function trong component có cần sử dụng useCallback ko anh, nếu a thấy đc cmt thì mong a trả lời e ạ, e cám ơn a

[@F8VNOfficial]

Ko em nhé, function ở component cha nếu đc truyền qua props vào component con (có sử dụng React.memo) thì mới cần sử dụng useCallback e nhé

[@hoangbui5516]

Cho em hỏi là trong trường hợp bài này thì dùng useRef cho handlerIncrease cũng cho ra cùng kết quả, vậy trường hợp nào dùng useCallback, trường hợp nào dùng useRef thì hợp lý ạ? const handleIncrease = useRef(()=>{ setCounter(prev=>prev+1); }) ...

[@F8VNOfficial]

useRef nó giữ tham chiếu tới hàm của em luôn mà không thay đổi (trừ khi chủ động hán lại), useCallback thì có dependencies để quyết định có tạo lại hàm mới hay không em ạ

[@hoangbui5516]

@@F8VNOfficial em cảm ơn anh đã giải đáp ạ ^^

[@anhtuanle4991]

@@F8VNOfficial :> search google không thấy vào youtube xem thì thấy a giải đáp. hihi

[@igdev6095]

E có xem nhiều clip nói về ứng dụng của useCallback là tránh 1 function có logic phức tạp tính toán lại khi bị re-render ko biết có phải ko, ban đầu e nghĩ là hàm đó có gọi đâu mà phải tính toán lại, theo a và mn ntn? 😅

[@baoduy7198]

Mình nghĩ ứng dụng của useCallback là tránh các component con (được nhận props từ cha như function) bị re-render lại ko cần thiết khi mà component cha re-render lại

[@hieuao8733]

theo em biết nếu lạm dụng thằng useCallback cũng gây ra vấn đề về bộ nhớ memory chứ không phải lạm dụng gây vô nghĩa đúng không ạ ?

[@cncp246]

hình như là mỗi lân re-render thì một biến dạng tham chiếu chỉ bị thay đổi vùng nhớ trong bộ nhớ heap thôi nên ko đó có dung useCallback cũng ko có ý nghĩ như a sơn nói

[@danhnguyen8818]

mỗi lần rerender đều tạo ra func mới nếu k dùng useCallback thế thì dù k dùng react.memo mình vẫn dùng useCallback để khỏi phải tạo ra ref mới => vẫn tối ưu chứ nhỉ

[@trandinhthang5778]

useCallback chỉ được dùng trong một component mà bạn thay react.memo thành useCallback thì bạn viết như nào á?

[@cncp246]

mình nghĩ một biến tham chiếu khi re-render thì biến đó sẽ bị thay đổi vùng nhớ chứa địa chỉ (heap) thôi. Nên dùng useCallback cũng ko tối ưu hơn được

[@phungtruongdinhquan7765]

Tại sao mình phải viết là function Content({ onIncrease }) {} mà ko phải là function Content( onIncrease ) {} nhỉ? Em xóa đi thì thấy nó bị lỗi.

[@sonminhpham8118]

xem lại Destructuring sẽ hiểu đó bạn

[@baoduy7198]

Vì đơn giản tham số mà function Content nhận là 1 object chứa các props mà component cha đưa vào, { onIncrease, .... } = props

[@greens7607]

Anh ơi cho em hỏi tại sao dùng useCallback rồi nhưng vẫn bị re-render ạ

[@F8VNOfficial]

Không phải cứ dùng là không re-render em. Em phân biệt xem nó là re-render cần thiết hay là không cần thiết. Sau đó xác định yếu tố cụ thể gây ra vấn đề là gì thì mới giải quyết được.

[@anhdangcode]

Hay quá anh ơi

[@DavidJames535]

Hay và dễ hiểu ạ

[@nguyenAudio77]

Rất hay anh

[@ĐỗĐứcTiệpJes]

ủa có cả React Hook form mà ko thấy trong list có nhỉ Sơn ơi

[@F8VNOfficial]

Cái đó là thư viện ngoài chứ không phải là khái niệm của React bạn nha. Khóa này mình cũng chưa có đề cập tới React Hook Form nha.

[@dinhdinh8860]

Em cần được giải thích : Tại sao nếu viết setCount(count+1) thì thằng callback vô tác dụng ạ Cảm ơn anh

[@lamnguyenduc6216]

gọi useCallback với array rỗng [] nó chỉ set state có 1 lần đầu, nên những lần sau hàm handleIncrease chỉ có đối số bằng 1

[@amanda2348-g9j]

mình cũng thắc mắc giống b

[@amanda2348-g9j]

@@lamnguyenduc6216 vậy tại sao viết prev => prev + 1 thì lại được, vấn đề chỗ đó ấy b?

[@lhson1208]

@@amanda2348-g9j prev là giá trị trước đó của setCount trả về . Ví dụ count được khởi tạo bằng 0 thì lúc này prev = 0 . Khi ấn click thì prev + 1 tức là prev lúc này là 0 + 1 = 1

[@tienhuynh2435]

so fucking amazing knowledge sir

[@amanda2348-g9j]

sao mình viết setCount(count + 1) trong useCallback mà không truyền thằng count vô thì nó không tăng lên được còn viết prev => prev + 1 thì lại tăng count lên bình thường vậy

[@cncp246]

tìm hiểu khái niệm closer nhé

[@AnLe-fc4gk]

chả hiểu sao chứ học hook này mới hiểu dc usestate vs useeffect chứ mấy hook khác khó nhai quá

[@h.n.a.d7804]

đưa lên web f8 đi anh.

[@tapquenmoitinhdau]

// Mọi người cho e hỏi tại sao dùng lại k được ạ const handleIncrease = useCallback(() => { setCount(count + 1); // tại sao dùng count + 1 không đươc? }, []);

[@glorynt7925]

Paste lên hết đi

[@thuanphamvan6210]

tại sao dùng setCount(count + 1) thì nó k work, còn dùng setCount(count => count + 1) thì nó work nhỉ, mình lủng bài quá :))

[@F8VNOfficial]

Cái này phải chắc về scope với closure lắm ý

[@free2idol1]

setCount(count + 1) ko works vì setCount() chỉ chạy 1 lần vào lúc được mounted, còn lúc re-render nó ko chạy. Và theo lí thuyết về closure thì closure khi được khởi tạo sẽ nhớ vị trí nó được khởi tạo. Trong TH này, setCount() sẽ nhớ thời điểm nó được khởi tạo là lúc được mounted, mà lúc được mounted thì count = 0 và trong suốt quá trình đó dù có re-render đi nữa setCount() nó cũng ko bị chạy lại => ở trong scope chứa setCount đó thì count luôn bằng 0 (tức giá trị ban đầu).

[@amanda2348-g9j]

@@free2idol1 vậy tại sao viết setCount(prev => prev + 1) thì lại được vậy b?

[@zomodiscovery4658]

@@amanda2348-g9j vì lúc này giá trị trước đó nó sử dụng là giá trị của state hiện tại là thằng pre, mà pre đã tăng lên rồi cứ vậy mà cộng thôi bạn

[@anhtuanle4991]

vì thằng callback trong useCallback là 1 closure. Nên khi nó lấy giá trị count vào, nó sẽ lưu giá trị count đó vào 1 vùng nhớ. Mỗi lần setCount nó vẫn cứ vào vùng nhớ đó mà lấy cái count đó nên nó mãi là 2 + thêm việc desp là emsty array nên nó chỉ chạy 1 lần. Nếu bác gán desp là count thì nó sẽ chạy bình thường. - Còn việc count => count + 1 work thì thằng count lúc này chứa giá trị trước đó. thì nó chỉ việc lưu giá trị vào chính thằng count lúc này. Mỗi lần nó set xong nó cứ lấy lại chính thằng prev đó thay thế vào.

[@NhatNguyen-zg6il]

7:30

[@tian4906]

♥♥♥♥♥

[@angNguyen-yr7qc]

anh ơi vậy props là biến thì sao nó lại ko re-render lại ạ. Mỗi lần re-render nó cũng khởi tạo lại biến giống như hàm mà a

[@anhtuanle4991]

Theo mình thì do biến nó là kiểu tham trị. Mà tham trị thì khi memo so sánh === nó sẽ trả về true, nên sẽ không rerender. Còn hàm là kiểu tham chiếu. Lúc nó so sánh vùng nhớ thì nó sẽ là false nên nó sẽ rerender lại. Nên phải dùng callback để lưu nó vào một vùng nhớ mới. Không biết đúng ý bác không :Đ

[@cwstudio454]

8:45