ทำงานแบบอะซิงโครนัสด้วย useEffect สะอาดและปลอดภัย

จากการเรียก APIเพื่อตั้งค่าการหน่วงเวลาการหมดเวลาฉันแน่ใจว่าคุณเคยสงสัยแล้วว่าจะทำอย่างไรอย่างถูกต้องเมื่อใช้ React useEffecthook หากเสียงนั้นยังคงไม่ชัดเจน แสดงว่าบทความนี้เหมาะสำหรับคุณ ถ้าไม่อย่างนั้น อย่างน้อยคุณอาจเรียนรู้วิธีที่แตกต่างออกไปเพื่อให้งานสำเร็จลุล่วงหรือรู้สึกมั่นใจมากขึ้นในขณะทำงาน

ผมจะนำเสนอ 3 วิธีในการทำอย่างปลอดภัยและเป็นระเบียบเรียบร้อย แต่ก่อนอื่น ฉันต้องการแสดงสิ่งที่คุณไม่ควรทำ

สิ่งที่คุณไม่ควรทำ ❌

อย่าทำงานแบบ async โดยตรงใน useEffect แต่ให้รวมงาน async ของคุณไว้ในฟังก์ชันและเรียกใช้งานจาก useEffect เท่านั้น

นี่คือตัวอย่างสิ่งที่คุณไม่ควรทำ:

useEffect(async () => {
   await getData();
},[]);

นอกจากนี้ การทำสิ่งที่ตัวอย่าง BAD นี้แสดงให้เห็น จะทำให้เกิดข้อผิดพลาด React:

การเรียกกลับของเอฟเฟกต์เป็นแบบซิงโครนัสเพื่อป้องกันสภาพการแข่งขัน

เอาล่ะ ตอนนี้เราปลอดภัยแล้วที่จะก้าวไปสู่แนวทางปฏิบัติที่ดี ⬇️

1. กำหนดฟังก์ชัน async ภายใน hook

หากคุณต้องการใช้งานแบบอะซิงโครนัส เพื่อรับข้อมูลบางส่วนจาก API และอัปเดตสถานะการโหลดของส่วนประกอบของคุณ คุณต้องกำหนดฟังก์ชันภายใน hook แล้วเรียกมันว่า:

useEffect(() => {
async function getData() {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
   }
getData();
},[]);

2. กำหนดฟังก์ชัน async นอก hook

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

const getData = useCallback(() => {
    setLoading(false);
    const reponse = await myApi.getSomeGoodData()
    setLoading(true);
}, [])
useEffect(() => {
getData()
},[getData])

3. การตั้งค่าช่วงเวลาหรือหมดเวลา

2 ตัวอย่างก่อนหน้านี้เน้นไปที่การดึงข้อมูลและอัปเดตสถานะส่วนประกอบเป็นหลัก นี่คือการแสดงสถานการณ์ทั่วไปสำหรับงาน async ภายใน useEffect ซึ่งกำลังตั้งค่าช่วงเวลาหรือหมดเวลา

เคล็ดลับสำหรับมันคือการล้างการหมดเวลาและช่วงเวลาที่กำหนดไว้ในไฟล์useEffect.

การตั้งค่าหมดเวลา

useEffect(() => {
const timeout = setTimeout(() => {
     // do something
   }, 100)
return () => {
      clearTimeout(timeout);
   }
},[])

useEffect(() => {
const interval = setInterval(() => {
       // do something
  }, 100)
return () => {
      clearInterval(interval);
  }
},[])

ตัวอย่างข้างต้นจะช่วยให้คุณครอบคลุมถึง 99.99% ของสถานการณ์ async ที่คุณอาจพบในขณะที่ React กำลังพัฒนา เพียงจำไว้ว่าให้คำนึงถึงการพึ่งพาเอฟเฟกต์ หากคุณไม่พบกรณีของคุณในตัวอย่างด้านล่าง แสดงความคิดเห็นแล้วฉันจะตรวจสอบให้

ขอบคุณสำหรับการอ่าน

—- เฟอร์นันโด อโบลาฟิโอ