useRef hook: Lấy giá trị trước đó của state 🎉

[@EasyFrontend]

Cảm ơn các bạn đã xem video của mình nghen! 😍 Nếu có chia sẻ hay thắc mắc nào, các bạn hãy để lại bình luận bên dưới nhé!

[@LQT1102]

Những bài miễn phí các kênh các rất hời hợt nhưng của a lại rất hay, cảm ơn a

[@EasyFrontend]

Tuấn Lê hihi cảm ơn em nhiều nhé Tuấn ơi 😍

[@LQT1102]

@@EasyFrontend Nào a so sánh thử cái redux saga vs redux thunk nha a

[@KhangNguyen-kq2iw]

0:00 Giới thiệu 0:52 Làm sao giữ giá trị trước đó của 1 state? 2:06 Lợi ích của useRef 2:58 Giải thích code 6:35 Ví dụ thực tế khi sử dụng useRef 7:55 Link tham khảo

[@EasyFrontend]

Yeah cảm ơn em nhiều nhiều nhé Khang ơi Số lượng video đã contribute: 1 🎉

[@KhangNguyen-kq2iw]

@@EasyFrontend hehe k có gì anh, nay mới có tg để cày tiếp video của a Hậu

[@chungbienthanh4076]

Xin phép a cho em nói thêm! Đây đơn giản chỉ là 1 cách! Nếu bạn học lập trình thì sẽ quen với từ "temp - temporary". 1 cách khác! Bạn có thể khởi tạo 1 giá trị ở localstorage. Khi thay đổi hãy push vào. Giờ ko chỉ bạn lấy đc pre-state mà có thể lấy đc pre của pre của pre state cũng đc! And Cảm ơn anh đã chia sẻ!

[@EasyFrontend]

Chung Biện Thành Yeah yeah cảm ơn em nhiều Chung ơi, đúng như em nói, cái anh share chỉ là một cách nè hihi, cách em làm cũng đc nghen, chỉ cần lưu ý thêm một điều là khi nào reset cái state trong storage là okie nhé Chung 😉

[@babayaga3303]

Code localstorage mà không xoá người sau debug khóc luôn

[@devquen7688]

mấy cái này cũng k nên lạm dụng localstorage nhỉ, vì giả sử giống như trong ví dụ đi, mỗi lần button trigger thay đổi count thì lại lên set local storage sau đó get về, thì ít nhìu về măth pef cũng k tốt tẹo nào mn nhỉ

[@giahuyha6189]

Bài này anh giảng rất hay ạ, cơ mà nó bị lạc nhầm danh sách phát rồi

[@EasyFrontend]

yeah cảm ơn em, a đã add thêm vào playlist hooks hihi

[@wangtinsum1307]

Document cua a doc de hieu ghe

[@EasyFrontend]

hihi cảm ơn em nhiều ❤️

[@ndthinh91]

Hay! Dễ hiểu hơn doc nhiều đấy anh

[@EasyFrontend]

yeahhh cảm ơn em nhiều nhiều nhé 😍

[@phamquochuy2353]

Cảm ơn anh vì bài giảng dễ hiểu lắm ạ

[@EasyFrontend]

yeah cảm ơn em nhé Huy, em cú đêm ghê 🤣

[@huydo2707]

a giảng sâu mà hay ghê

[@EasyFrontend]

Yeahhh cảm ơn em nhiều nhé Huy ơi 😍

[@ngthuongnguyen9804]

A ơi ra video về router v6 đi anh! Vô cùng ủng hộ anh! Hii

[@EasyFrontend]

yeah cơ mà cái này anh sẽ làm trong khóa reactjs nè hihi, anh hk có làm trên youtube em nhen

[@ngthuongnguyen9804]

@@EasyFrontend a cũng công giáo à, a ở xứ nào thế anh?

[@thanhhung6701]

có ae nào ở đây học react nản quá nhảy qua Angular k :((

[@EasyFrontend]

thời gian đầu hơi nản em nha, cơ mà em làm một thời gian sẽ quen với nó nha 😉

[@shenkn2140]

Đà nẵng đổ mưa, buồn nhưng lại có những video anh hiện lên, Cuộc đời hết nhàm chán.

[@EasyFrontend]

lol nghe y như ngôn tình Shen ơi =))) Anyway, cảm ơn em nhiều nhé hihi 😍

[@nghiabasil]

sao không có file pdf vậy anh hehe

[@EasyFrontend]

hi Nghĩa, em check thử link này có file em cần ko nha drive.google.com/drive/folders/1HtFWcGq5w_j8rZ-mSw_I7s2bG7E5npQg?usp=sharing

[@nghiabasil]

@@EasyFrontend Không có anh ạ. Trong đó có tài liệu của khóa ReactJS, đây là khóa React Hook 😁

[@anhdang761]

useRef nó sẽ chứa một object có thể mutate đc mà ko trigger re-render, đó là lý do nó vẫn hiển thị giá trị trc đó ở giao diện, chứ nó sẽ ko lưu giá trị trc đó khi ta xử lý trong logic

[@EasyFrontend]

hi Anh, vẫn được nhé, nếu bạn xử lý logic trước khi update sang giá trị mới thì ref nó vẫn có giá trị mới nè 😉

[@anhdang761]

@@EasyFrontend vâng, nhưng trong video anh nói là useEffect chạy sau render, đó là cách giải thích gây nhầm lẫn cho người xem đó ạ

[@EasyFrontend]

@@anhdang761 hihi a có nói rõ ràng mà, a cũng có giải thích vụ sau khi chạy 1 vòng là nó giá trị như nhau, e coi lại hết video nhé 😉

[@manhaosy8644]

mình xem cũng thấy dễ bị nhầm, bản thân cái ví dụ đưa ra cho người có kiến thức rồi thì ko sao chứ cái này cho người mới thì khả năng nhầm rất cao

[@jockerthe8189]

anh ơi sao em ko thấy link slide của bài này thế anh

[@EasyFrontend]

à sr em, anh cũng quên mất cái slide của bài này ở đâu luôn òi hic

[@baolyhong6140]

2 tuần không thấy a mà cứ như cả tháng vậy á :> lại kiếm thêm được tí kiến thức vô đầu rồi hehe

[@baolyhong6140]

Cơ mà hình như kỹ thuật này anh có nhắc qua lúc làm custom hooks rồi hay sao ý

[@EasyFrontend]

Bao Ly Hong hehee a nhớ là anh có dùng useRef mà trong trường hợp khác, ví dụ khác á Bảo hehee

[@baolyhong6140]

@@EasyFrontend cái lúc mà đổi màu tự động rồi dùng cho nó khỏi bị trùng màu á anh

[@baolyhong6140]

mà em hay dùng global variable để lưu mấy cái option của select, làm vậy thì có sao không a, em để trong local mỗi lần render nó tạo 1 instance mới nên em k để local

[@aodaichannel5677]

anh cho em hỏi, (phút 3:30) anh nói là dòng 7 do state mặc định count = 0 nên dòng 8 prevCount giá trị cũng sẽ = 0 vì useRef(count), vậy khi lần render thứ 2 (phút 5:03) giá trị count bây giờ là 1 mà dòng 8 nó sử dụng useRef(count) mà không cập nhật lên 1 mà vẫn là 0 vậy a?

[@EasyFrontend]

hi em ơi, có một điểm em cần lưu ý nữa là effect sẽ chạy sau khi render nhen. Tức render xong mới chạy vào mấy cái effects lận nha 😉

[@holicneko1668]

dùng useRef phải kết hợp vs useEffect à anh?

[@EasyFrontend]

hi em, việc dùng useRef ko bắt buộc phải dùng useEffect em nhen, tùy trường hợp mà em sử dụng cho hợp lý là okie nhé

[@chupachupscuong3708]

Cảm ơn anh Hậu nhé

[@EasyFrontend]

wohooo cảm ơn em nhiều nhé Cường 😉

[@hoanghero98]

thay cái prevCount đó bằng 1 biến ko dùng userRef thì có dc ko anh

[@EasyFrontend]

hi Hoàng, anh nghĩ em có thể dùng biến global, tuy nhiên a hk nghĩ mình nên làm vậy. Em bị vướng vào tình huống nào hở Hoàng? 😉

[@hoanghero98]

@@EasyFrontend ý e là thay vì phải khai báo const prevCount = useRef(count), sao mình ko khai báo let prevCount = count, rồi update lại biến prevCount mỗi khi click

[@targunn690]

@@hoanghero98 vì nếu bạn khai báo let chứ k dùng useRef thì mỗi lần state thay đổi. Component render lại thì biến bạn khai báo sẽ bị khai báo lại từ đầu. Bạn có thể dùng biến toàn cục cũng được nhưng mình nghĩ nên dùng useRef hơn.

[@nhutle3924]

Quá hay a ơi

[@EasyFrontend]

Yeahhhh cảm ơn em nhiều nhé Nhựt ơi 😍

[@juhandvan]

Đoạn [5:00] : "cái count của mình = 1, cái ref của mình vẫn = 0" . Tại sao nó vẫn bằng 0 vậy anh Hậu, e tưởng nó lấy giá trị của count hiện tại chứ ạ. A có thể giải thích chỗ này không. Cám ơn a nhiều ạ

[@EasyFrontend]

hi Juhand ơi, nếu em để ý thì thật ra sau khi chạy hết 1 chu kỳ thì giá trị của ref và state là như nhau. Tuy nhiên do render chạy trước, xong mới tới effect(), nên lúc render thì cái ref nó vẫn còn giữ giá trị cũ, còn state đã là giá trị mới rồi hehe

[@juhandvan]

@@EasyFrontend Thế thì theo e nếu đúng thì ta giải thích là sau lần render đầu tiên, sau khi click để tăng biến count => gọi hàm setCount => component re-render tuy nhiên hai câu lệnh khởi tạo ở dòng 7 và 8 nó không được chạy lại nữa, phải vậy không anh

[@dereknguyen3698]

Cảm ơn a Hậu 😬

[@EasyFrontend]

Hời ơiiiii, e cảm ơn a Derek ạ 😊

[@minhvu0906]

Anh Hậu cho e xin cái slide bài giảng với, e cảm ơn ạ

[@EasyFrontend]

hi em, file này lâu quá òi, anh tìm lại hk thấy nữa òi =)))

[@minhvu0906]

@@EasyFrontend dạ a, tại slide đẹp mà e ngại viết lại 😅

[@EasyFrontend]

@@minhvu0906 haha thường mấy videos khác a hay để link slide trong video, mà cái này đợt đó a quên hay sao á =))

[@minhvu0906]

@@EasyFrontend xui quá 😅, dạ e cảm ơn a

[@duonginhxuan668]

a làm về redux saga đi a ơi

[@EasyFrontend]

Dương Đinh Xuân haha redux saga chắc làm một series luôn quá hehe, mà okie em, anh add vào queue làm video nhé 🙂

[@duonginhxuan668]

@@EasyFrontend vâng a . em hóng quá :v

[@trungthanhbp]

@@EasyFrontend ưu tiên làm cái này đi anh, cái này h thấy nhiều project đang sài lắm

[@EasyFrontend]

Yeah cảm ơn em, vậy chắc làm một vài videos cơ bản trước hen, để mn hiểu đc bản chất vấn đề, xong advanced lên thì nói sau hen 😉

[@trungminh549]

Đa tạ đại hiệp quá rõ luôn

[@EasyFrontend]

Trung Minh ngon lành, cảm ơn Trung nhiều nha hehee 😉

[@phucle1843]

Anh ơi, vấn đề là em đang lm 1 web chat, em đang ko biết cách hiển thị trang web khi ng dùng gởi link 1 trang web lên(kiểu giống giống như mình gởi link lên mesenger cho ai đó thì nó ko chỉ hiện link mà còn hiển thị trang web). Anh cho e xin key Word về vấn đề này ạ, em cảm ơn a trc nhe😅

[@EasyFrontend]

hi Phúc ơi, a thì cũng chưa làm cái này nên không dám chắc lắm, nhưng a đoán thế này: 1. Khi em gửi một tin nhắn có đính kèm link lên server. 2. Server tự nhận thấy à có link website, nó sẽ crawl content của link đó và lấy ra thông tin meta tags. Rồi tạo một message mới, nằm ngay sau message mình gửi lên. Sau đó báo client, ê có 2 message mới nè. 3. Client lắng nghe message mới thấy có 2 thằng mới thì update list message hiện tại để hiển thị thêm 2 ông thần đó lên 🙂

[@phucle1843]

@@EasyFrontend em cám ơn a 😁

[@duetran9373]

có phải nó giống như cái thanh search trong facebook không anh, khi mình search tìm kiếm 1 thứ gì đó. xong, sau đó thì mình bấm vô ô search đó thì nó hiện lại lịch sử tìm kiếm ( nó hiện cái tên mới nhất mình vừa search). Theo em nghĩ là vậy, không có có đúng không anh ! Em cảm ơn ạ.

[@EasyFrontend]

à hk u em nha, cái như em nói là là lịch sử tìm kiếm òi nè 😉 còn mình chỉ muốn giữ cái state trước đó, và giá trị đó lưu giữ trong ref, khi nó thay đổi nó ko trigger re-render 🙂

[@duetran9373]

@@EasyFrontend dạ em cảm ơn anh. Cái này trong thực tế mình chỉ hay dùng trong map ( cái anh cho ví dụ) thôi hả anh, anh có thể cho em xin vài product thực tế nữa được không ạ

[@nghiaminh7704]

làm như này thì thêm 1 lần render nữa mà KHÔNG phải do click increase (vd 1 cái props nào đó thay đổi, cha render lại,...) thì nó lộ ra ngay prev đã được cập nhật bằng count đúng k ạ?

[@EasyFrontend]

yeah hợp lý em nhen 👍

[@vitrieu437]

vậy nếu trong class thì mình dùng thèn nào tương đương useRef vậy a?

[@EasyFrontend]

vi dang hi Vi ơi, nếu là class component thì mình có thể đơn giản dùng thuộc tính của class là okie rồi nhé anh 🙂 Và mỗi khi componentDidUpdate, a update thuộc tính đó theo state là được nha a 😉

[@duonginhxuan668]

React.createRef

[@hangocluc3824]

Chào anh. Không biết hiện tại anh có viết typescript không ạ?

[@EasyFrontend]

hi Lực ơi, hiện a cũng có làm với ts nhé, mà chưa nhiều kinh nghiệm lắm, em có gặp vấn đề gì hk? 🙂

[@hangocluc3824]

@@EasyFrontend Dạ hiện tại thì e mới bắt đầu dự án mới. E đang setup với ts. Hiện thì chưa có vấn đề gì nhưng e cũng mới học ts nên chưa biết mấy pattern hay best practices. A có thể share một vài kinh nghiệm ko ạ?

[@phamhieu9539]

@@EasyFrontend Hau nguyen oi cho toi hoi cai live server cai dat roi ma noi khong su dung duoc , vao ca setting chinh sua roi khong hieu sao khong su dung duoc

[@glorynt7925]

a Hậu cho e hỏi về chỗ này, ngay chỗ setCount, cái count trước đó a gán nó là useState(0) và a viết 1 cái sự kiện onClick là setCount(x => x+1) vậy cho e hỏi setCount(x=> x+1) mình có thể viết là setCount(count +1) không a, có khác nhau gì không ạ, e cảm ơn.

[@EasyFrontend]

hi Glory ơi, câu hỏi hay nè em, có một số ý ở đây e hen: Nếu em update state mà nó dựa vào state cũ thì luôn luôn dùng dạng callback em hen, tức dùng dạng x => x + 1; Lý do tại vì việc update là asynchronus nên để tránh những tình huống race condition thì mình nên dùng dạng callback nó sẽ đảm bảo lấy theo đúng giá trị trước đó. Còn em mà dùng dạng (count + 1), lỡ có 2 cái set state thế này: count hiện là 3 có một cái set state count + 1 thêm một cái set state count + 1 nữa và lúc set state này cả 2 thằng đều hiểu count đang là bằng 3 --> KQ cuối nó ra count mới bằng 4, trong khi mình expect là bằng 5 🙂 Đo nó oái ăm chỗ đó em hen hehee

[@1151TT0209]

Like, thanks anh

[@EasyFrontend]

Yeahhhh cảm ơn em nhiều nhé! 😉

[@hoangle8212]

thank you for sharing

[@atnguyentien8630]

Anh làm về redux saga đi ạ.

[@EasyFrontend]

hihi bữa giờ mn request ông này nhiều quá, chắc ưu tiên làm trước quá 😉

[@atnguyentien8630]

A k ưu tiên làm sớm là hụt follow haha

[@atnguyentien8630]

Anh làm về redux saga đi ạ.