0Pricing
Frontend Academy · บทเรียน

พื้นฐาน useEffect: dependencies และการทำความสะอาด

เรียกใช้ผลข้างเคียงหลังการเรนเดอร์ ควบคุมว่าจะเรียกซ้ำเมื่อใดด้วยอาร์เรย์ dependency และคืนค่าฟังก์ชันทำความสะอาดเพื่อป้องกันหน่วยความจำรั่ว

พื้นฐาน useEffect: dependencies และการทำความสะอาด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

useEffect คืออะไร

useEffect จะทำงานกับผลข้างเคียงหลังจาก React แสดงผล ผลข้างเคียงได้แก่ การดึงข้อมูล การสมัครรับเหตุการณ์ การตั้งตัวจับเวลา และการโต้ตอบกับ API ภายนอก ผลข้างเคียงจะทำงานหลังจากเบราว์เซอร์วาดหน้าเสร็จ ไม่ใช่ระหว่างการแสดงผล

ไวยากรณ์พื้นฐาน

useEffect(effect, deps?) ฟังก์ชันผลข้างเคียงจะทำงานหลังการแสดงผลทุกครั้งเป็นค่าเริ่มต้น ให้ระบุอาร์เรย์การพึ่งพาเพื่อควบคุมว่าจะให้ฟังก์ชันทำงานเมื่อใด

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    console.log('Ran after every render');
  });
}

อาร์เรย์การพึ่งพาควบคุมเวลาที่ผลข้างเคียงทำงาน

อาร์เรย์ว่าง []: ทำงานหนึ่งครั้งหลังเมานต์ อาร์เรย์ที่ไม่ว่าง [a, b]: ทำงานเมื่อ a หรือ b เปลี่ยนแปลง ไม่มีอาร์เรย์: ทำงานหลังการแสดงผลทุกครั้ง ซึ่งมักไม่ใช่สิ่งที่ต้องการ

// Run once on mount:
useEffect(() => {
  fetchInitialData();
}, []);

// Run when userId changes:
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Run after every render (usually a bug):
useEffect(() => {
  trackPageView();
});

ฟังก์ชันล้างข้อมูล

คืนฟังก์ชันจาก useEffect เพื่อดำเนินการล้างข้อมูล เช่น ลบตัวรับฟังเหตุการณ์ ยกเลิกการสมัครรับข้อมูล และล้างตัวจับเวลา ฟังก์ชันล้างข้อมูลจะทำงานก่อนผลข้างเคียงถัดไปและเมื่อยกเลิกการเมานต์

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Cleanup: remove listener when effect re-runs or component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

คลอเชอร์ค้างในอาร์เรย์การพึ่งพา

ผลข้างเคียงจะปิดล้อมค่าที่อ้างอิงไว้ ณ เวลาที่สร้างขึ้น หากคุณอ่านค่าของสถานะหรือพร็อพภายในผลข้างเคียงโดยไม่ใส่ค่านั้นไว้ในรายการการพึ่งพา คุณจะเห็นค่าที่ค้างอยู่ กฎ exhaustive-deps ของ ESLint จะตรวจจับปัญหานี้

กฎ exhaustive-deps ของ ESLint

กฎ ESLint react-hooks/exhaustive-deps จะแจ้งเตือนเมื่อคุณขาดรายการการพึ่งพาของผลข้างเคียง โดยเกือบทุกครั้งควรทำตามคำแนะนำของกฎนี้ เพราะการพึ่งพาที่ค้างอยู่ทำให้เกิดข้อผิดพลาด

useEffect เทียบกับ useLayoutEffect

useEffect ทำงานหลังจากเบราว์เซอร์วาดหน้า ส่วน useLayoutEffect ทำงานพร้อมกันหลังการเปลี่ยนแปลง DOM และก่อนการวาดหน้า ให้ใช้ useLayoutEffect เมื่อต้องอ่านค่าการวัดของ DOM เพื่อหลีกเลี่ยงการกะพริบของภาพ

ผลข้างเคียงหลายรายการ

ใช้การเรียก useEffect หลายครั้งเพื่อแยกเรื่องที่ไม่เกี่ยวข้องกัน ผลข้างเคียงแต่ละรายการสามารถมีอาร์เรย์การพึ่งพาและตรรกะการล้างข้อมูลของตนเองได้

// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
  const sub = wsClient.subscribe(onMessage);
  return () => sub.unsubscribe();
}, []);

เงื่อนไขการแข่งขัน — แฟล็ก ignore

เมื่อผลข้างเคียงดึงข้อมูลตามพร็อพ คำขอก่อนหน้าอาจเสร็จสิ้นหลังคำขอที่เกิดขึ้นภายหลัง ให้ใช้แฟล็กในฟังก์ชันล้างข้อมูลเพื่อ ignore การตอบกลับที่ค้างอยู่

useEffect(() => {
  let ignore = false;

  async function load() {
    const data = await fetchUser(userId);
    if (!ignore) setUser(data); // only update if not cleaned up
  }

  load();
  return () => { ignore = true; };
}, [userId]);

ผลข้างเคียงสองครั้งในโหมดเข้มงวด

Strict Mode ของ React 18 จะเมานต์ ยกเลิกการเมานต์ และเมานต์องค์ประกอบใหม่อีกครั้งในระหว่างการพัฒนา เพื่อเปิดเผยข้อผิดพลาดในการล้างข้อมูล ผลข้างเคียงของคุณจะทำงานสองครั้ง ซึ่งเป็นพฤติกรรมที่ตั้งใจไว้และช่วยตรวจจับการล้างข้อมูลที่ขาดหาย

เมื่อไม่ควรใช้ useEffect

อย่าใช้ useEffect เพื่อ: 1) คำนวณสถานะจากพร็อพ ให้คำนวณระหว่างการแสดงผล 2) รีเซ็ตสถานะเมื่อพร็อพเปลี่ยน ให้ใช้พร็อพ key 3) อัปเดตสถานะแบบไม่มีเงื่อนไข เพราะจะทำให้เกิดลูป หากไม่แน่ใจ ให้ถามว่าโค้ดนี้ตอบสนองต่อเหตุการณ์ของผู้ใช้หรือระบบภายนอกหรือไม่

ตรวจสอบอย่างรวดเร็ว

ฟังก์ชันล้างข้อมูลของ useEffect จะทำงานเมื่อใด

สรุป: useEffect

ผลข้างเคียงจะทำงานหลังการแสดงผล อาร์เรย์การพึ่งพาที่ว่างเปล่า = ทำงานครั้งเดียวเมื่อเมานต์ อาร์เรย์การพึ่งพา = ทำงานเมื่อค่าที่ระบุเปลี่ยนแปลง คืนฟังก์ชันล้างข้อมูลเพื่อป้องกันการรั่วไหล ใช้ผลข้างเคียงหลายรายการสำหรับเรื่องที่แยกจากกัน แฟล็ก ignore ป้องกันการตอบกลับจากการดึงข้อมูลที่ค้างอยู่ Strict Mode ทำให้ผลข้างเคียงทำงานสองครั้งเพื่อทดสอบการล้างข้อมูล อย่าใช้ useEffect กับค่าที่คำนวณได้หรือสถานะที่สามารถคำนวณระหว่างการแสดงผลได้

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน useEffect: dependencies และการทำความสะอาด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน useEffect: dependencies และการทำความสะอาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน useEffect: dependencies และการทำความสะอาด”

เรียกใช้ผลข้างเคียงหลังการเรนเดอร์ ควบคุมว่าจะเรียกซ้ำเมื่อใดด้วยอาร์เรย์ dependency และคืนค่าฟังก์ชันทำความสะอาดเพื่อป้องกันหน่วยความจำรั่ว คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐาน useEffect: dependencies และการทำความสะอาด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน useEffect: dependencies และการทำความสะอาด
  2. การดึงข้อมูลเมื่อเมานต์
  3. การจัดการสถานะกำลังโหลดและข้อผิดพลาด
  4. AbortController สำหรับการทำความสะอาด
← กลับไปที่ Frontend Academy