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

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

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

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 ạ

Anh Sơn giảng hay quá

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

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.

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

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

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 ?

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

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ó)

@QuaNhanhCodingMusic

2 жыл бұрын

Chuẩn

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

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

Hay quá anh oi

Hay và dễ hiểu ạ

Rất hay anh

Hay quá anh ơi

=)) đù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

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

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

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

@QuaNhanhCodingMusic

2 жыл бұрын

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

@sonlengoc948

Жыл бұрын

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

@QuaNhanhCodingMusic

Жыл бұрын

I have no idea

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

2 жыл бұрын

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

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

2 жыл бұрын

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é

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

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

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é

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

@F8VNOfficial

6 ай бұрын

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.

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

@F8VNOfficial

9 ай бұрын

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.

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

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á

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

2 жыл бұрын

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

2 жыл бұрын

@@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

// 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

2 жыл бұрын

Paste lên hết đi

♥♥♥♥♥

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

2 жыл бұрын

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

@baoduy7198

2 жыл бұрын

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

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

2 жыл бұрын

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

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

2 жыл бұрын

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

@NamLe-sl4qy

Жыл бұрын

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

@NamLe-sl4qy

Жыл бұрын

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

@lhson1208

Жыл бұрын

@@NamLe-sl4qy 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

7:30

8:45

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 :Đ

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

2 жыл бұрын

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

@free2idol1

2 жыл бұрын

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).

@NamLe-sl4qy

Жыл бұрын

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

@zomodiscovery4658

Жыл бұрын

@@NamLe-sl4qy 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.