- เราใช้ useEffect ใน React functional component แทน componentDidMount
- useEffect คล้ายๆ componentDidMount แต่ไม่เหมือนซะทีเดียว และยืดหยุ่นกว่า
- componentDidMount ถูก trigger ทุกครั้งที่ component ถูก mount กับ DOM หรือทุกครั้งที่ state เปลี่ยนแปลง
- useEffect ก็จะ trigger ทุกครั้งที่ state หรือ props ของ function เปลี่ยนแปลง แต่เราสามารถกำหนดได้ด้วย ว่าจะสนใจ state หรือ props ไหน
- นอกจากนั้นใน useEffect เองก็สามารถทำ componentWillUnMount ได้ด้วย โดย return function
- useEffect เหมาะสำหรับเอาไปใช้รอรับ callback จาก ajax หรือทำ redux dispatch
ท่าในการใช้ useEffect
const component = () => {
// state loaded เอาไว้ render ในกรณีที่ยังไม่ได้ข้อมูลจาก ajax (เช่น loading ก็ได้นะ)
[loaded, setLoaded] = React.useState(false)
// state content เอาไว้ใส่ข้อมูล
[content, setContent] = React.useState('')
useEffect(() => {
// ดึงข้อมูลเสร็จแล้วค่อยทำ setContent
getContent.then(res => {
setLoaded(true)
setContent(res)
})
// เมื่อทำ unmount ก็ clear state กลับเป็นอย่างเดิม
return () => {
setLoaded(false)
setContent('')
}
},
// state ที่เราสนใจจะ subscribe ใน useEffect ตัวนี้
[loaded, content])
}
Top comments (0)