React Hooks 2022

<p>Khóa học Khóa Học React Hooks: Nâng Tầm Kỹ Năng Lập Trình là chương trình chuyên sâu giúp bạn làm chủ công cụ React Hooks, tối ưu hóa việc quản lý trạng thái và các tính năng trong ứng dụng React. Khóa học hướng dẫn sử dụng các Hooks phổ biến như useState, useEffect, useContext để tăng hiệu quả phát triển. Bên cạnh kiến thức lý thuyết, bạn sẽ được thực hành sâu rộng, áp dụng kiến thức vào dự án thực tế. Khóa học cung cấp cái nhìn chi tiết và ứng dụng thực tế về React Hooks, giúp bạn xây dựng ứng dụng hiệu quả và dễ bảo trì.</p>

Lập trình 

ReactJS

👉Trong bài này anh em sẽ cùng nhau làm quen với khái niệm Hooks trong React nhé nhé nhé 😍😍

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Hooks là gì? Giới thiệu React Hooks

👉 Trong video này chúng ta sẽ tìm hiểu về useState trong React hook nhé anh em 😍😍

useState là một hook trong React được sử dụng để đơn giản hóa việc thể hiện trạng thái của dữ liệu ra giao diện người dùng (UI). Khi bạn sử dụng useState thì React sẽ tạo ra một binding dữ liệu một chiều (từ state của component tới UI). Khi state thay đổi tự động React sẽ xử lý để UI được cập nhật lại. Điều này được React xử lý tự động cho chúng ta, vì vậy khi làm việc với React + useState hook các bạn không cần phải thao tác DOM thủ công như khi code thuần với Javascript nhé.

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

useState trong React hook | React hook 2021

Two-way binding là ràng buộc dữ liệu 2 chiều, điều này thường được nhắc tới khi các bạn làm việc với biểu mẫu (form) trong các lib/framework front-end. Trong video này chúng ta sẽ cùng nhau đi qua các ví dụ để các bạn có thể ứng dụng được useState() nhé.

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Two-way binding | React hooks 2021

Trong bài này chúng ta sẽ đi làm thêm 1 ví dụ Todolist rồi bài sau học sang useEffect() hook nhé anh em.

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Todolist with useState() | React hooks 2021

Trong video này chúng ta tìm hiểu về thuật ngữ Mounted & Unmounted nhé anh em 😍

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

Mounted & Unmounted?

Tìm hiểu chi tiết về khái niệm Hooks trong React thông qua các ví dụ giải quyết các vấn đề trong công việc thực tế.

React Hooks 2022 1

Trong video này mình sẽ nói về useEffect hook trong React một cách chậm dãi và chi tiết, rất phù hợp cho các bạn mới học nhé. Video được chia làm 4 phần với mỗi ví dụ đi kèm giúp các bạn hình dung ra cách áp dụng React useEffect trong thực tế hơn 😍😍

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

React useEffect hook chi tiết cho người mới

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

useEffect with dependencies | React hooks 2021

useEffect() with DOM events

useEffect() with timer functions

useEffect() with preview avatar

React Hooks 2022 2

Trong video này chúng ta sẽ cùng làm một ví dụ khó hơn một xíu, đó là ứng dụng chat fake. Trong ví dụ này chúng ta sẽ sử dụng useEffect hook để listen messages chat/comment và sử dụng cleanup function để remove listener để rời khỏi kênh chat/comment nhé.

Phân đoạn trong video:
00:00 - useEffect with Chat App
15:48 - Chữa bài trước

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

useEffect() with fake Chat App

useLayoutEffect hook là một hook hoạt động tương tự như useEffect hook. Điểm khác nhau giữa 2 hooks này là thứ tự thực hiện các công việc mình đã liệt kê dưới đây:

#useEffect
1. Cập nhật lại state
2. Cập nhật DOM (mutated)
3. Render lại UI
4. Gọi cleanup nếu deps thay đổi
5. Gọi useEffect callback

#useLayoutEffect
1. Cập nhật lại state
2. Cập nhật DOM (mutated)
3. Gọi cleanup nếu deps thay đổi (sync)
4. Gọi useLayoutEffect callback (sync)
5. Render lại UI

Source: https://dev.to/nibble/what-is-uselayouteffect-hook-and-when-do-you-use-it-3lan

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

useLayoutEffect() hook? | React hooks 2021

useRef() hook

React.memo() HOC

useCallback() hook

React Hooks 2022 3

useMemo() hook

useReducer() hook

Todo App with useReducer() hook

useReducer() recap | React hooks 2021

React Context & useContext() hook

React Hooks 2022 4

Tại 27:15 mình có bị nhầm anh em nhé. Vì Provider nó nhận component App dưới dạng chidren nên mỗi khi re-render trong Provider nó không gây ra re-render cho chidlren em nhé, lý do là vì children nó được khởi tạo ở bên ngoài Provider nên Provider re-render không gây tạo lại App em nhé.

---

Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web http://fullstack.edu.vn thay vì Youtube. Lý do tại sao mời bạn bấm vào đây: https://www.youtube.com/watch?v=f5hbmw7Ba7c

#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
---------------------------------------

☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: http://bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: http://bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: https://mycv.vn

☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (http://bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (http://bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (http://bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (http://bit.ly/37wgXfC)
Icon theme: Material Icon Theme (http://bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (http://bit.ly/3gYlaf9)

☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: https://fullstack.edu.vn/courses/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: https://fullstack.edu.vn/courses/html-css
Xây dựng web responsive: https://fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: https://fullstack.edu.vn/courses/javascript-nang-cao
Xây dựng web với Node & Express: https://fullstack.edu.vn/courses/nodejs
HTML, CSS tips: https://fullstack.edu.vn/courses/html-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: https://fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
Xem thêm tại: https://fullstack.edu.vn/courses

☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.

☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú

🍺 Buy me a beer
https://www.buymeacoffee.com/f8official

F8 Official
(c) Sơn Đặng
Website: https://fullstack.edu.vn
Facebook cá nhân: https://facebook.com/sondnmc
Nhóm Học Lập Trình Web: https://www.facebook.com/groups/f8official
Email: sondnf8@gmail.com

© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.

React Hooks 2022

What you'll learn

Skills you'll gain

Course content

Instructor

Review