👉 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
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 😄
mn cho em hỏi là Khi mà nhấn nút "Toggle" trong App, component Content được mounted vào DOM. Thì React sẽ render JSX của Content đầu tiên (trả về và với posts là mảng rỗng lúc đầu) hay là sẽ gọi useEffect trước. Em thấy trong video có bảo là "Callback của useEffect sẽ được gọi sau khi component mounted ".
Â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é
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 ?
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ớ).
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 =))
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.
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
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.
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
@@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 đó.
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ỉ?
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
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
👉 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 ^^
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 (～￣▽￣)～
anh dạy kĩ vô cùng, dễ hiểu nữa
Dạy rất kỹ và hay , cảm ơn anh nhiều
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á ạ ^^
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 hữu ích lắm ạ, phong cách chân thật mà hiện đại 🤗
cảm ơn anh, video hay quá, hôm qua em vừa gặp lỗi với call api ^^
mn cho em hỏi là Khi mà nhấn nút "Toggle" trong App, component Content được mounted vào DOM. Thì React sẽ render JSX của Content đầu tiên (trả về và với posts là mảng rỗng lúc đầu) hay là sẽ gọi useEffect trước. Em thấy trong video có bảo là "Callback của useEffect sẽ được gọi sau khi component mounted ".
Cảm ơn anh video rất dễ hiểu
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 :)
Em cám ơn anh rất nhiều !!!
13:05 giải thích tại sao viết code trong useEffect
Hóng video a Sơn như hồi xưa hóng quà mẹ đi chơ về :)))))))))
cảm ơn anh ạ
17:00 strictMode
Fan cứng 😊
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 :))
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
Anh làm API luôn nha anh
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
Hay quá anh ơi!
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.
hay quá a ơi
Chạy bo không bằng a Sơn ra video rùi^^
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?
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
quá đỉnh luôn anh ơi
Chào anh ...
Trong useEffect ta return thi ket qua nhu nao anh
Hay quá anh ơi
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 =))
❤❤❤❤
a ơi , a có mở lớp online dạy js k ạ ?
Thật sự quá hay. Dạy rất có tâm ! Tuyệt vờ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.
xin qua 🎉
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
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.
máy em 32gb mà code đến phút21 hơi đơ, xem task manager thấy cắn 2gb ram
❤️
Học xong khóa React JS thử build quả web F8 clone =)))
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
trường hợp 1 nó lắp vô cùng là vì sao ạ
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ì ạ
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
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?
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 đó
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
anh ơi , vậy return trong useEffect thì sao ạ
phần code return sẽ đc chạy khi component unmount đấy b
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
❤❤❤❤