useEffect เป็น hook ที่ใช้ในการทำ side effect ใน functional component ซึ่ง side effect ที่เราทำจะเป็นการ fetch data จาก API หรืออื่นๆ ที่เราต้องการทำใน component นั้นๆ
ตัวอย่างการใช้ useEffect ในการ fetch data จาก API
import React, { useState, useEffect } from "react";
function DataFetcher() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
ในตัวอย่าง จะเห็นว่าเราใช้ useEffect ในการ fetch data จาก API และเมื่อ fetch เสร็จแล้ว เราก็จะเอา data
ที่ได้ไป set ให้กับ state ที่ชื่อว่า data