React hook: useEffect แบบสั้นๆ

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