React useEffect hook chi tiết dành cho người mới | React JS
Вставка
- Опубліковано 21 сер 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong video này mình sẽ nói về React useEffect hook chi tiết dành cho người mới | React JS
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 😍😍
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© 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.
👉 Trong video có đoạn mình nói ngược, add/remove event listener mới là dựa trên observer pattern (publish/subscribe) các bạn nhé. Mình chia video làm 4 phần siêu chi tiết, các phần sau mỗi video khoảng hơn 10 phút. Mình sẽ nói về:
1. useEffect với dependencies
2. useEffect với DOM event listener
3. useEffect với setInterval, setTimeout
cho em hỏi là trong làm việc thực tế khi có nhiều Effect chỉ chạy 1 lần thì anh thường gom vào code chung trong 1 useEffect hay tách ra ạ
cảm ơn thầy Sơn rất nhiều ạ 🥰
@@giahuyha6189 Logic khác nhau (làm các việc khác nhau) thì em tách ra làm nhiều useEffect nhé
Em cám ơn thầy Sơn nhiều lắm ạ. Nhờ loạt video giải thích tường tận ba cách dùng của useEffect, em đã đậu vào dream company 🙌🏼😄❤️
Đây là lần thứ ba em phỏng vấn lại, tạch hai lần trước và cuối cùng lần này đậu. Lúc người ta hỏi về useEffect, em trả lời như được mùa ấy, tường tận phân tích 3 cách dùng lẫn ví dụ từ thầy Sơn.
Cám ơn thầy Sơn đã rất có tầm có tâm, nhờ có video thầy Sơn không thôi em bơi theo mệt nghĩ. Hehe
Chúc thầy Sơn luôn nhiều sức khỏe.
Học trò từ phương xa 😄
Tốc độ ra video quá tuyệt vời luôn học thôi ae ơi!
Anh dạy rất kĩ, ngày nào cũng hóng anh ra bài mới để học ^^
anh dạy kĩ vô cùng, dễ hiểu nữa
cái cách vào video rồi mở laptop lên sau này có thể thành thương hiệu của anh Sơn luôn ấy (～￣▽￣)～
Dạy rất kỹ và hay , cảm ơn anh nhiều
Thật sự quá hay. Dạy rất có tâm ! Tuyệt vời.
Hay quá anh ơi, em vẫn mông lung phần này mà nay anh nói em thấy dễ hiểu quá ạ ^^
Cảm ơn anh video hữu ích lắm ạ, phong cách chân thật mà hiện đại 🤗
e cảm ơn a nhiều ạ, may mà có a mà mấy cái hook e làm quen trong 1 nốt nhạc
cảm ơn anh, video hay quá, hôm qua em vừa gặp lỗi với call api ^^
Cảm ơn anh video rất dễ hiểu
Hóng video a Sơn như hồi xưa hóng quà mẹ đi chơ về :)))))))))
quá đỉnh luôn anh ơi
Fan cứng 😊
Quá tuyệt vời anh ơi , em cảm ơn anh nhìuuu
Video vô cùng bổ ít cho ae nào muốn leo rank :)
Video này anh đc 9.5đ thôi nhé, ì phéc k phải e phệch nha anh 😀
Âm "k" mà đọc lên giọng á em. Em lại cao thủ Eng lích à 🤣🤣. Vẫn cảm ơn góp ý của em nhiều nha vì nhiều từ anh vẫn đọc sai tè le ý mà. Chủ yếu em nên focus vào nội dung nhé
anh dạy kĩ quá chắc em khỏi đọc docs :))
Em cám ơn anh rất nhiều !!!
Hay quá anh ơi!
Anh cho em hỏi, em đọc doc React có đoạn này:
[ Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects. ]
Theo em hiểu thì mounted với render là không giống nhau, nhưng đoạn này nói nghe có vẻ giống nhau. Anh giải thích thêm chỗ này giúp em được không ạ?
Trong React, mỗi component có một hàm render() chứa các thông tin về cách component sẽ được hiển thị trên trình duyệt. Khi component được tạo ra và thêm vào DOM, điều này gọi là "mounting".
Quá trình mounting bắt đầu bằng việc tạo một instance của component và gọi hàm componentDidMount(), sau đó component được thêm vào DOM. Nếu trạng thái của component thay đổi, hàm render() sẽ được gọi lại để cập nhật UI và hiển thị các thay đổi mới.
Vậy, "mounting" là quá trình tạo ra và thêm component vào DOM, trong khi "render" là việc hiển thị component trên trình duyệt dựa trên thông tin trong hàm render().
Ví dụ, chúng ta có một component tên là UserProfile với một thuộc tính username:
import React, { useState, useEffect } from 'react';
function UserProfile({ username }) {
const [userData, setUserData] = useState(null);
//componentDidMount()
useEffect(() => {
// Call API to fetch user data
fetch(`api.example.com/users/${username}`)
.then(response => response.json())
.then(data => {
setUserData(data);
});
}, [username]);
if (!userData) {
return Loading...;
}
//render()
return (
{userData.name}
{userData.email}
);
}
Khi component UserProfile được tạo ra và thêm vào DOM, hàm componentDidMount() sẽ được gọi. Trong ví dụ trên, chúng ta sử dụng useEffect để gọi API và lấy dữ liệu của người dùng. Khi dữ liệu được trả về, chúng ta sử dụng setUserData để cập nhật trạng thái và gọi lại hàm render() để hiển thị thông tin của người dùng.
Video bổ ích.
Hời ơi bảo sao nó chạy vô tận, lên đọc docs chục lần vẫn ko biết chán nản luôn. Mà anh ơi đọc docs cũng phải có cách đúng ko ạ, em đọc doc thật sự thấy trang Mozila là giao diện đẹp, dễ nhìn dễ tim, dễ hiểu, em có đọc docs của Microsoft mà thấy rối quá.
docs nhiều cái xem hiểu sơ sơ thôi chứ chủ yếu vẫn phải có thầy dậy mới hiểu được bạn ạ. Như sau học react rồi học Material UI ko có thầy dạy bó tay luôn =))
Hay quá anh ơi
Sao em thử console.log trong useEffect( () => { console.log('test') }) thì nó lại in ra test tới 2 lần vậy á. Mong được các cao nhân chỉ giáo
mình cũng bị xong bạn pp nào chưa'
đoạn 17:10s a Sơn có nói do cái Strictmode nha các bạn.
Anh làm API luôn nha anh
hay quá a ơi
13:05 giải thích tại sao viết code trong useEffect
cảm ơn anh ạ
❤❤❤❤
Về ví dụ sử dụng useEffect chỉ truyền callback ở phút 8:50 thì em/mình có thắc mắc là: Trong thẻ input mình đâu cần phải đặt lại attribute value={ title } đúng không anh/mọi người ?
đặt để tận dụng 2 way binding á b
không nhất thiết phải đặt trong mọi trường. trường hợp như bạn muốn set lại value rỗng thì mới cần
Chạy bo không bằng a Sơn ra video rùi^^
a ơi , a có mở lớp online dạy js k ạ ?
Học xong khóa React JS thử build quả web F8 clone =)))
17:00 strictMode
Chào anh ...
A Sơn e có 1 số câu hỏi về kỹ thuật muốn hỏi thì có thể gửi qua đâu được anh?
Cho em hỏi chút, mỗi lần nhập ký tự vào ô input thì lại re-render lại component, điều này có ảnh hưởng đến performant ko ạ, ví dụ component đó có nhiều element
theo mình nghĩ là nõ cũng ảnh hưởng đó nhưng với dụ án to =)) cón như mh ví dụ nhỏ nhỏ thì chắc k sao
Bạn ơi cho mình hỏi:
Mình tạo custom hook (call API), tại component sử dụng nó, mình muốn là khi nhấn vào 1 button mới gọi hook để call API, nên mình call hook trong hàm handleClick, nhưng nó báo "Invalid hook call. Hooks can only be called inside of the body of a function component".
Có cách nào giải quyết (trong thực tế đi làm) bạn nhỉ?
này là do bạn đang dùng class component nên nó mới ko cho sử dụng hook đó
20:28 Anh cho em hỏi chỗ này khi setPosts bằng một giá trị reference (như array trong clip) thì sẽ bị rơi vào lòng lặp vô tận, nhưng khi setPosts là một giá trị primitive như số hoặc chuỗi thì lại ko bị nhỉ?
React nó dùng toán tử === để so sánh, nếu state mới khác state cũ nó sẽ render lại em nhé. Trong ví dụ dùng array như trong clip bị render lại vì mỗi lần setPosts là 1 array mới em nhé (khác địa chủ vùng nhớ).
@@F8VNOfficial À à em quên mất, state nó trùng với state trước thì nó đâu render lại làm gì haha 😁 Cảm ơn anh.
❤️
Trong useEffect ta return thi ket qua nhu nao anh
Mình làm giống anh Sơn, nhưng dùng API trên trang thời tiết. Cứ mỗi lần f5 thì giá trị lại trở về giá trị undifined, gây ra lỗi k trỏ đến được property mọi người có thể chỉ mình cách khắc phục không
anh ơi , vậy return trong useEffect thì sao ạ
phần code return sẽ đc chạy khi component unmount đấy b
em thấy anh để lại cái stricMode 17:49 nhưng 23:22 anh vẫn chạy 1 lần là sao ạ. em kh hiểu
sao em viết như anh mà gọi content thì dù sài useEffect vẫn in ra mounted vậy
Anh cho em hỏi sao em mở cái console lên mà nó không hiện gì ạ
trường hợp 1 nó lắp vô cùng là vì sao ạ
Về sau anh có dùng axios để gọi api ko ạ. E đang dùng th này với useEffect nhưng còn khá mơ hồ
Khác gì đâu em nhỉ, trong JS có XHR và fetch để call API thôi. Thì axios cũng là dùng XHR thôi mà, mơ hồ kiểu gì em nói ra anh xem
@@F8VNOfficial dạ, khi e ở component con dùng POST và cập nhật lại state ở component cha có useEffect dùng GET thì lệnh GET của component cha ấy chưa nhận đc cái của th POST mà re-render luôn ạ. Có vẻ như vấn đề này là side effects chứ ko nằm ở axios ạ. E cảm ơn a đã quan tâm.
@@tripham8864 Đúng rồi em, không liên quan gì tới axios hết em nhé. Em check lại xem tác nhân nào gây ra việc component cha bị re-render nhé, xem có thao tác nào setState hay dispatch redux action nào gây ra việc re-render đó.
@@F8VNOfficial em fix được rồi cảm ơn a. Hóng về sau a có video về tổ chức call API chứ gọi trực tiếp ở useEffect có vẻ ko chuyên nghiệp lắm :D
@@tripham8864 Theo em không chuyên nghiệp ở chỗ nào em?
Nếu phần callAPI e để là 1 hàm return về posts ở giá trị initial của useState thì cũng chỉ được gọi có 1 lần như vậy có được không ạ? A giải thích cho e với ạ
useState sẽ được thực thi rồi mới render UI. viêc bạn call api sẽ block việc render UI rồi. vì vậy nên sử dụng useEffect vì hàm callback trong useEffect sẽ được gọi sau khi render UI. anh Sơn có giải thích khúc side effect đó bạn
@@trandinhthang5778 cảm ơn bạn mình hiểu rõ rồi
Có ai biết cách co, kéo của sổ ưindow phút @5:50 như anh sơn không?
Chỉ mình với.
Mò mãi không ra
7:32 Tại sao đoạn này cũng dùng StrictMode mà nó không console log ra "Mounted" 2 lần vậy ạ, e thử nó console log ra 2 lần mà a?
mình cũng bị như này, bây h bạn biết lý do chưa chỉ cho mình vs, mình cảm ơn bạn nhiều
@@ThangNguyen-wh2vk Mình xóa StrictMode đi bạn mình cũng bị v
A ơi cho e hỏi, sau lần .then() thứ nhất thì kết quả nhận về .then() thứ 2 chứa data rồi sao mình còn đặt state là mảng rỗng đc ạ
Ở phút/giây nào em nhỉ
@@F8VNOfficial vâng a, ở phần promis bắt đầu phút thứ 20 a ơi?
Mảng rỗng nó đặt làm initialState thôi em ơi, sau đó, API gọi lấy đc mảng dữ liệu posts (phần then thứ 2) sẽ set lại state em nhé. Sau khi set lại, thì state posts không phải là mảng rỗng ban đầu nữa.
Dạ vâng, e cảm ơn a!
cho e làm phiền a xíu nữa. cho e hỏi trong thằng .then() thứ 2 là: .then(posts => {setPosts(posts)} ) thằng posts đứng trước, trước khi setPosts nó rỗng hay chứa dữ liệu api trả về ạ. e cảm ơn anh
❤❤❤❤