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

Web Development

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

ในการจัดการ Side Effect ใน React ก็จะใช้ hook ที่มีชื่อว่า useEffect ในบทความนี้เราจะมาดูกันว่า วิธีการใช้งานเป็นอย่างไร

9 เดือนที่ผ่านมา

1 min read

Table of Contents

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

Tags:

React