useEffect

#HelloFrontend #HelloErmine #HelloWorld2021

useEffect ใช้ทำอะไร ?

ใช้ในการจัดการกับ side effect ของ function component เช่น การดึงข้อมูลมาแสดง การอัปเดต title ให้กับหน้าเว็บไซต์ เป็นต้น

ข้อกำหนดในการใช้งาน

• ต้องเรียกใช้ภายใน function component เท่านั้น

• ต้องเรียกใช้อยู่ด้านบนสุดของ function component

• ต้องมีลำดับการเรียกที่เหมือนเดิมทุก ๆ render (ไม่เรียกใช้ใน condition หรือ loop)

ค่าที่ useEffect รับได้

1. [ต้องใส่] effect (function ที่จะให้ทำงานหลัง render)

2. [ไม่ใส่ก็ได้] dependency array (array ที่มีสมาชิกเป็นค่าที่เราสนใจ)

effect จะทำงานหลังจาก render เสร็จแล้วเท่านั้น

useEffect ทำงานยังไง ?

• เมื่อ component render ครั้งแรก : effect จะทำงาน 1 ครั้ง

• render ครั้งต่อ ๆ ไป : ขึ้นอยู่กับ dependency array

  1. ถ้าเป็น array ที่มีสมาชิก : effect จะทำงานเมื่อมีค่าของสมาชิกตัวใดตัวหนึ่งเปลี่ยนไปจาก render ครั้งก่อน

  2. ถ้าเป็น array เปล่า ๆ : effect จะไม่ทำงานอีกเลย

  3. ถ้าไม่ใส่ dependency array : effect จะทำงานทุก render

ตัวอย่างการใช้

import { useState, useEffect } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 useEffect(() => {
   document.title = `You clicked ${count} times`;
 })

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>Click me</button>
   </div>
 )
}

จากตัวอย่างข้างต้น useEffect รับ function ที่จะทำการเปลี่ยนค่า document.title ทุก ๆ ครั้งเมื่อเกิดการ render

แหล่งอ้างอิง

Using the Effect Hook – React

Hooks at a Glance – React