const Getdata= () => {
// state loaded เอาไว้ render ในกรณีที่ยังไม่ได้ข้อมูลจาก service
[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])
}
***
- 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 จาก service หรือทำ redux dispatch
ความคิดเห็น
แสดงความคิดเห็น