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 func