useMemo() hook | Tránh thực hiện lại 1 logic không cần thiết với useMemo()

[@ngotv4538]

a là ng dạy dễ hiểu nhất e từng xem

[@thanhthai9127]

anh làm về React router đi anh. Video của a mỗi khi e xem, dù là những kiến thức e đã học và sử dụng rất nhiều lần thì e đều thấy hay và lại có 1 cái j đó mới để học. Chúc a ngày càng thành công😀😄😘

[@vanoan3083]

video hay quá ạ. E học kỹ xíu mà vô thẳng dự án fix performance cho mấy ông code cũ luôn :).

[@duytungnguyen5394]

Chúc a cuối tuần vui vẻ, còn em cuối tuần cày video của anh =))

[@LapTrinhQuaNhanh]

Rất bổ ích

[@dinhdinh8860]

1. UseCallBack() : chỉ sự dụng khi là 1 function của component cha , được component con gọi lại và ở phía component con có sử dụng react.memo ,tác dụng để tránh việc component tạo lại không cần thiết trong quá trình re-render 2. useMemo(): sử dụng khi không muốn thay đổi logic của 1 function (có kết quả trả về) 1 cách không cần thiết mong mọi người góp ý ạ

[@lethienngan]

"2. useMemo(): sử dụng khi không muốn lăp lại logic của 1 function..."

[@hieuphamminh8857]

mình nghĩ useCallback được sử dụng để function tránh bị làm mới lại không cần thiết khi component re-render, đấy là cách nó hoạt động , chứ không phải useCallback được dùng khi gọi function đó từ component con

[@haitrinhnroonline]

chỉ 1 dòng bạn có thể hiểu : useEffect : ko dùng để lấy kết quả khi desp thay đổi, useMemo: dùng để lấy kết quả khi desp thay đổi

[@santd3400]

useEffect có return về kết quả đâu mà bạn nói vậy sao hiểu được

[@dinhanhtuan22]

useMemo trả về 1 giá trị trong useMemo callback, mục đích kiểm soát việc tính toán logic trong useMeno callback, k phụ thuộc vào việc render của component

[@TuTran-th3wd]

quá hay anh ạ,hóng vieo của a từng ngày

[@ngotuanminh4042]

Hi anh Sơn, 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

học kiểu này vừa học vừa đc ôn tập .^^ cảm ơn anh

[@vankhanhinfo]

Cho em hỏi là useEffect và useMemo có khác gì nhau ko, nếu dùng useEffect ở đây thì có khác gì nhau ko ạ và useMemo có clear function giống useEffect ko

[@lamnguyenduc6216]

thực ra dùng useEffect cũng được. const [total, setTotal] = useState(0) //Thêm state để lưu giá trị tổng useEffect(() => { setTotal( products.reduce((result, product) => { return result + product.price }, 0) ) }, [products]) useEffect có cái là nó render UI trước rồi mới gọi callback, nên giá trị total lúc render nó sửa tới 2 lần. Xong nó setState xong lại render thêm 1 lần nữa. Trong khi useMemo nó chỉ render 1 lần là xong.

[@pvtSWE]

@@lamnguyenduc6216 nếu muốn tránh re-render thì ở đây mình nghĩ là dùng useLayoutEffect thay cho useMemo cũng được

[@devq-2491]

video 4k luôn xịn xò quá

[@amanda2348-g9j]

cái focus đó không dùng useRef mà dùng getElement của js thuần rồi focus thì cũng thế nhỉ?

[@amanda2348-g9j]

7:56 sao "tính toán lại" nhảy từ 1 lên 3 vậy anh? nó có ảnh hưởng gì ko ạ?

[@jonahgodev]

Vì lúc này products có 2 phần tử => hàm reduce sẽ lặp 2 lần => log "tính toán lại" này sẽ hiển thị 2 lần nữa => tổng là 3 mà.

[@tranhtruonghue4089]

nó phải lặp qua để tính chứ đâu có sẵn đâu mà xài 1 lần dc :v

[@vubuiminh2804]

Ví dụ trong bài này có thể dùng useEffect có deps là products thay vì useMemo không anh em ? Nếu có thì ta hook nào ok hơn nhỉ ?

[@CuongLePianoCover]

dùng useEffect đc nhưng phải thêm cả useState, tùy bạn thích sử dụng hook nào

[@cncp246]

bạn hiểu cái callback của useEffect sẽ được gọi sau khi Component add vào DOM, nên đoạn code callback trong useEffect sẽ không có ý nghĩa nếu không kếp hợp useState

[@tinhhoangvu7979]

Hi anh Sơn, anh cho em hỏi ở phần Dependency của useMemo thì mình truyền vào 1 mảng Products ( kiểu reference) thì sau mỗi lần rerender nó sẽ khác nhau phải ko ạ, mà khác nhau thì hàm useMemo sẽ được chạy lại. Vậy thì sao trong trường hợp này mình lại truyền luôn cả mảng Products và tại sao nó lại hoạt động ạ. Em cảm ơn và chúc anh thành công hơn ạ

[@Misskieutra]

Products thay đổi khi add thêm hoặc xóa đi sản phẩm.

[@modivation6551]

product nó được quản lý bởi state nên thực tế nó không bị thay đổi reference, tức là nó không bị định nghĩa lại khi bạn re-render lại component. Nếu bại định nghĩa nó không thông qua useState thì nó sẽ chạy như bạn nói. Còn khi product dùng setState để thay đổi giá trị thì nó sẽ được gán cho 1 vị trí thẻ nhớ khác nên nó sẽ bị thay đổi

[@ledinhthai69]

Minh cảm thấy nó có gì đó chưa ổn lắm. Không ổn ở đây là gì? Khi mình add vào 1 sản phẩm, thì bạn nhìn dưới màn hình là nó ghi tính toán lại (chỉ 1 lần). Sau đó khi add sản phẩm thứ 2 vào, bạn quan sát sẽ thấy chữ số của dòng chữ "tính toán lại" nhảy lên số 3. Có nghĩa nó quét qua cái hàm tính tổng giá trị tới 2 lần. Như vậy là nó phí đi 1 lần tính toán lại(hiệu năng tính toán ko được tối ưu). Vậy có cách nào để cho nó chỉ tính lại 1 lần ko??? Chỗ mục dependency, mình có thể thay đổi thay vì ghi là [products], mình có thể thay đổi thành mục giá của sản phẩm thay đổi thì mới tính lại ko? Còn tên sản phẩm thêm vào, nếu ko có giá thì sẽ ko tính toán lại???

[@honghao6963]

Mình đang học đến đây thì thấy comment của bạn. Biết là lâu rồi nhưng mà trả lời cho mình nhớ thôi, bạn đừng bận tâm. Cái 'Tính toán lại" bạn thấy nhảy lên 3 không ảnh hưởng hiệu năng gì đâu (có 1 phần tử thì nó in 1 lần, 2 thì nó in 2 lần ==>Tổng là 3). Chẳng qua là cái console.log này nó nằm trong callback của thằng reduce nên mỗi lần duyệt qua 1 phần tử thì nó lại gọi callback này và in ra dòng đó. rồi mới cộng dồn price vào result. Nếu bạn muốn thấy useMemo() nó rõ hơn thì nên dời cái log đó ra khỏi callback của Array.reduce() luôn.

[@tapquenmoitinhdau]

cho mình hỏi những biến được binding ra giao diện như biến total trong trường hợp này thì để tăng performance sẽ cần phải quản lý bằng state phải không ạ?

[@modivation6551]

tùy từng bài toán bạn giải quyết, nếu bạn định nghĩa không thông qua hook thì mỗi lần re-render thì biến đó đều bị định nghĩa lại. Thường thì sẽ sử dụng các hook để quản lý dữ liệu.

[@danman3196]

Em chào anh , e hiểu sơ sơ về useMemo thông qua video.. e có thử không dùng useMemo trong ví dụ trên. mà chỉ dùng useState như bên dưới , Thì a cho r hỏi llà e dùng cách này có ổn ko a ? có thể phát sinh lỗi hay liên quan đến performance ko ạ ? Em xin cảm ơn . const [name, setName] = useState(''); const [price, setPrice] = useState(''); const [products, setProducts] = useState([]); const nameRef = useRef(); const [total, setTotal] = useState(0); const handleSubmit = () => { setProducts((prePros => { const newPros = [...prePros, { name, price: +price }]; setTotal(() => { const result = newPros.reduce((result, prod) => { console.log('re-calculate'); return result + prod.price; }, 0); return result; }); return newPros })); setName(''); setPrice(''); nameRef.current.focus(); };

[@CuongLePianoCover]

dùng state thì bị render nhiều lần quá

[@ThienNguyen-ec7le]

video 10 phút hơn mà sao em xem có tí hết như 3 4 phút vây ta chưa đã anh ơi kkk

[@LapTrinhQuaNhanh]

Công nhận. Bánh cuốn thật sự!

[@hoaimiqng]

hay quá anh ạ

[@dennisnguyen5787]

có ai có thể chỉ giúp mình cách xóa 1 trong những phần tử được render từ cái products kia không :( loay hoay mãi mà không biết làm

[@nguyenquocan8949]

em cũng gặp trường hợp tương tự là khi em làm cái giỏ hàng mỗi khi ng ta add to cart thì giá trị total bị thay đổi ko biết là có xài useEffect thay cho useMemo đc ko anh

[@shjndohjkaru]

theo mình nghĩ là vẫn được, nhưng dùng useEffect thì phải dùng kèm với useState để lưu giá trị sau khi thay đổi.

[@nguyenquocan8949]

@@shjndohjkaru thank anh

[@modivation6551]

đừng dùng useEffect +useState, nói chung dùng useState sẽ dẫn đến việc re-render lại app. dùng useMemo thì nó sẽ không làm re-render lại app, mà nó sẽ được tính toán lại cùng lượt re-render của product. hoặc bạn dùng useRef, rồi tại lúc add product vào thì bạn tính toán lại total rồi lưu vào ref.

[@namnguyen-gk5kx]

Const total= products.reduce(result, prod)=> result + prod.price... đoạn này khó hiểu quá ạ

[@F8VNOfficial]

Em học JS thuần kỹ vào đi em. Nó là method reduce khi làm việc với Array đó.

[@tapquenmoitinhdau]

Dùng state có xử lý đc case này k ae

[@modivation6551]

được nhé bạn. Tại thời điểm product bạn tính toán lại total theo số sản phẩm mới . rồi set lại state cho nó. Cách này cũng không làm re-render thêm, nhưng nó sẽ không tường minh như dùng useMemo.

[@KienThucTuTraiNghiem]

@@modivation6551 mình đặt log thấy nó vẫn re-render thêm 1 lần do dùng setTotal

[@BaoTran-ii6pc]

Quá hay

[@MrTranminhtu]

trong web F8 sao ko thấy video này thế, ai giải thích giúp mình ko :(((

[@vantan107]

Lên youtube trước sau đó anh Sơn phải add vào f8 nữa

[@NguyenNguyen-db6sr]

trên F8 chưa có useCallback hook anh ơi

[@F8VNOfficial]

Cảm ơn em, anh đã bổ sung em nha

[@NguyenNguyen-db6sr]

@@F8VNOfficial 😍

[@hoanglt126]

Dùng useState cx đc nhỉ

[@hoaimiqng]

hi