คุณสมบัติ Concurrent ของ React: การเรียนรู้การเรนเดอร์ตามลำดับความสำคัญเพื่อประสบการณ์ผู้ใช้ที่เหนือกว่า

คุณสมบัติ Concurrent ของ React แสดงถึงวิวัฒนาการที่สำคัญในวิธีการจัดการอัปเดตและการเรนเดอร์ของแอปพลิเคชัน React หนึ่งในแง่มุมที่ทรงพลังที่สุดคือ การเรนเดอร์ตามลำดับความสำคัญ (priority-based rendering) ซึ่งช่วยให้นักพัฒนาสามารถสร้างส่วนต่อประสานกับผู้ใช้ (UI) ที่ตอบสนองได้ดีและมีประสิทธิภาพมากขึ้น บทความนี้จะให้คำแนะนำที่ครอบคลุมเพื่อทำความเข้าใจและนำการเรนเดอร์ตามลำดับความสำคัญไปใช้ในโปรเจกต์ React ของคุณ

คุณสมบัติ Concurrent ของ React คืออะไร?

ก่อนที่จะเจาะลึกเรื่องการเรนเดอร์ตามลำดับความสำคัญ สิ่งสำคัญคือต้องเข้าใจบริบทที่กว้างขึ้นของคุณสมบัติ Concurrent ของ React ซึ่งเปิดตัวมาพร้อมกับ React 16 คุณสมบัติเหล่านี้ช่วยให้ React สามารถทำงานต่างๆ พร้อมกันได้ (concurrently) หมายความว่าสามารถประมวลผลการอัปเดตหลายอย่างไปพร้อมกันได้โดยไม่ขัดขวางเธรดหลัก (main thread) สิ่งนี้นำไปสู่ประสบการณ์ผู้ใช้ที่ลื่นไหลและตอบสนองได้ดียิ่งขึ้น โดยเฉพาะในแอปพลิเคชันที่ซับซ้อน

คุณสมบัติหลักของ Concurrent Features ได้แก่:

• การเรนเดอร์ที่ขัดจังหวะได้ (Interruptible Rendering): React สามารถหยุดชั่วคราว, ทำต่อ, หรือยกเลิกงานเรนเดอร์ได้ตามลำดับความสำคัญ
• การแบ่งเวลา (Time Slicing): งานที่ใช้เวลานานจะถูกแบ่งออกเป็นส่วนเล็กๆ เพื่อให้เบราว์เซอร์ยังคงตอบสนองต่อการกระทำของผู้ใช้ได้
• Suspense: เป็นวิธีการแบบประกาศ (declarative) เพื่อจัดการกับการทำงานแบบอะซิงโครนัส เช่น การดึงข้อมูล เพื่อป้องกันไม่ให้ UI ค้าง
• การเรนเดอร์ตามลำดับความสำคัญ: ช่วยให้นักพัฒนาสามารถกำหนดลำดับความสำคัญให้กับการอัปเดตต่างๆ เพื่อให้แน่ใจว่าการเปลี่ยนแปลงที่สำคัญที่สุดจะถูกเรนเดอร์ก่อน

ทำความเข้าใจการเรนเดอร์ตามลำดับความสำคัญ

การเรนเดอร์ตามลำดับความสำคัญคือกลไกที่ React ใช้ในการตัดสินใจลำดับการนำการอัปเดตไปใช้กับ DOM โดยการกำหนดลำดับความสำคัญ คุณสามารถควบคุมได้ว่าการอัปเดตใดที่ถือว่าเร่งด่วนกว่าและควรจะถูกเรนเดอร์ก่อนการอัปเดตอื่นๆ ซึ่งมีประโยชน์อย่างยิ่งในการทำให้แน่ใจว่าองค์ประกอบ UI ที่สำคัญ เช่น ช่องป้อนข้อมูลของผู้ใช้ หรือแอนิเมชัน ยังคงตอบสนองได้ดีแม้ในขณะที่มีการอัปเดตที่ไม่สำคัญอื่นๆ เกิดขึ้นในเบื้องหลัง

React ใช้ตัวจัดตารางเวลา (scheduler) ภายในเพื่อจัดการการอัปเดตเหล่านี้ ตัวจัดตารางเวลาจะจัดหมวดหมู่การอัปเดตเป็นเลน (lanes) ต่างๆ (คิดซะว่าเป็นคิวตามลำดับความสำคัญ) การอัปเดตที่มีเลนลำดับความสำคัญสูงกว่าจะถูกประมวลผลก่อนการอัปเดตที่มีลำดับความสำคัญต่ำกว่า

เหตุใดการเรนเดอร์ตามลำดับความสำคัญจึงสำคัญ?

ประโยชน์ของการเรนเดอร์ตามลำดับความสำคัญมีมากมาย:

• การตอบสนองที่ดีขึ้น: โดยการจัดลำดับความสำคัญของการอัปเดตที่สำคัญ คุณสามารถป้องกันไม่ให้ UI หยุดตอบสนองระหว่างการประมวลผลหนักๆ ตัวอย่างเช่น การพิมพ์ในช่องป้อนข้อมูลควรจะตอบสนองได้เสมอ แม้ว่าแอปพลิเคชันจะกำลังดึงข้อมูลอยู่พร้อมกันก็ตาม
• ประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น: UI ที่ตอบสนองและลื่นไหลนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น ผู้ใช้มีโอกาสน้อยที่จะประสบกับความล่าช้าหรือการหน่วง ทำให้รู้สึกว่าแอปพลิเคชันมีประสิทธิภาพมากขึ้น
• ประสิทธิภาพที่เพิ่มขึ้น: โดยการจัดลำดับความสำคัญของการอัปเดตอย่างมีกลยุทธ์ คุณสามารถลดการเรนเดอร์ซ้ำที่ไม่จำเป็นและเพิ่มประสิทธิภาพโดยรวมของแอปพลิเคชันของคุณได้
• การจัดการการทำงานแบบอะซิงโครนัสอย่างนุ่มนวล: คุณสมบัติ Concurrent โดยเฉพาะเมื่อใช้ร่วมกับ Suspense ช่วยให้คุณจัดการการดึงข้อมูลและการทำงานแบบอะซิงโครนัสอื่นๆ ได้โดยไม่ขัดขวาง UI

การเรนเดอร์ตามลำดับความสำคัญทำงานอย่างไรใน React

ตัวจัดตารางเวลาของ React จัดการการอัปเดตตามระดับความสำคัญ แม้ว่า React จะไม่ได้เปิดเผย API โดยตรงเพื่อกำหนดระดับความสำคัญให้กับการอัปเดตทุกอย่าง แต่โครงสร้างแอปพลิเคชันและวิธีที่คุณใช้ API บางตัวจะมีผลโดยนัยต่อลำดับความสำคัญที่ React กำหนดให้กับการอัปเดตต่างๆ การทำความเข้าใจกลไกเหล่านี้เป็นกุญแจสำคัญในการใช้ประโยชน์จากการเรนเดอร์ตามลำดับความสำคัญอย่างมีประสิทธิภาพ

การจัดลำดับความสำคัญโดยนัยผ่าน Event Handlers

การอัปเดตที่เกิดจากการโต้ตอบของผู้ใช้ เช่น การคลิก การกดปุ่ม หรือการส่งฟอร์ม โดยทั่วไปจะได้รับลำดับความสำคัญสูงกว่าการอัปเดตที่เกิดจากการทำงานแบบอะซิงโครนัสหรือตัวจับเวลา (timers) นี่เป็นเพราะ React สันนิษฐานว่าการโต้ตอบของผู้ใช้มีความสำคัญต่อเวลามากกว่าและต้องการการตอบสนองทันที

ตัวอย่าง:

```javascript function MyComponent() { const [text, setText] = React.useState(''); const handleChange = (event) => { setText(event.target.value); }; return ( ); } ```

ในตัวอย่างนี้ ฟังก์ชัน `handleChange` ซึ่งอัปเดต state `text` จะได้รับลำดับความสำคัญสูงเนื่องจากถูกกระตุ้นโดยตรงจากการป้อนข้อมูลของผู้ใช้ React จะให้ความสำคัญกับการเรนเดอร์การอัปเดตนี้เพื่อให้แน่ใจว่าช่องป้อนข้อมูลยังคงตอบสนองได้ดี

การใช้ useTransition สำหรับการอัปเดตลำดับความสำคัญต่ำ

Hook useTransition เป็นเครื่องมือที่ทรงพลังในการระบุอย่างชัดเจนว่าการอัปเดตบางอย่างมีความเร่งด่วนน้อยกว่า มันช่วยให้คุณสามารถเปลี่ยนจาก state หนึ่งไปยังอีก state หนึ่งได้โดยไม่ขัดขวาง UI ซึ่งมีประโยชน์อย่างยิ่งสำหรับการอัปเดตที่ทำให้เกิดการเรนเดอร์ใหม่จำนวนมากหรือการคำนวณที่ซับซ้อนซึ่งไม่สำคัญต่อประสบการณ์ของผู้ใช้ในทันที

useTransition คืนค่ามาสองอย่าง:

• isPending: ค่าบูลีนที่บ่งชี้ว่าการเปลี่ยน (transition) กำลังดำเนินการอยู่หรือไม่
• startTransition: ฟังก์ชันที่ใช้ครอบการอัปเดต state ที่คุณต้องการชะลอ

ตัวอย่าง:

```javascript import React, { useState, useTransition } from 'react'; function MyComponent() { const [isPending, startTransition] = useTransition(); const [filter, setFilter] = useState(''); const [data, setData] = useState([]); const handleFilterChange = (event) => { const newFilter = event.target.value; // ชะลอการอัปเดต state ที่กระตุ้นการกรองข้อมูล startTransition(() => { setFilter(newFilter); }); }; // จำลองการดึงข้อมูลและการกรองตาม state 'filter' React.useEffect(() => { // จำลองการเรียก API setTimeout(() => { const filteredData = Array.from({ length: 1000 }, (_, i) => `Item ${i}`).filter(item => item.includes(filter)); setData(filteredData); }, 500); }, [filter]); return ( ); } ```

ในตัวอย่างนี้ ฟังก์ชัน `handleFilterChange` ใช้ `startTransition` เพื่อชะลอการอัปเดต state `setFilter` ซึ่งหมายความว่า React จะถือว่าการอัปเดตนี้มีความเร่งด่วนน้อยกว่าและอาจขัดจังหวะได้หากมีการอัปเดตที่มีลำดับความสำคัญสูงกว่าเข้ามา (เช่น การโต้ตอบของผู้ใช้อื่น) แฟล็ก isPending ช่วยให้คุณสามารถแสดงตัวบ่งชี้การโหลดในขณะที่การเปลี่ยนกำลังดำเนินการอยู่ ซึ่งเป็นการให้ผลตอบรับทางสายตาแก่ผู้ใช้

หากไม่มี useTransition การเปลี่ยนตัวกรองจะทำให้เกิดการเรนเดอร์ใหม่ของทั้งรายการทันที ซึ่งอาจทำให้ UI หยุดตอบสนอง โดยเฉพาะอย่างยิ่งกับชุดข้อมูลขนาดใหญ่ แต่การใช้ useTransition ทำให้การกรองถูกดำเนินการเป็นงานที่มีลำดับความสำคัญต่ำกว่า ทำให้ช่องป้อนข้อมูลยังคงตอบสนองได้ดี

ทำความเข้าใจ Batched Updates

React จะรวบการอัปเดต state หลายๆ ครั้งให้เป็นการเรนเดอร์ใหม่เพียงครั้งเดียวโดยอัตโนมัติเมื่อทำได้ นี่คือการเพิ่มประสิทธิภาพเพื่อลดจำนวนครั้งที่ React ต้องอัปเดต DOM อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจว่าการรวบ (batching) มีปฏิสัมพันธ์กับการเรนเดอร์ตามลำดับความสำคัญอย่างไร

เมื่อการอัปเดตถูกรวบเข้าด้วยกัน ทั้งหมดจะถูกถือว่ามีลำดับความสำคัญเท่ากัน ซึ่งหมายความว่าหากหนึ่งในการอัปเดตมีลำดับความสำคัญสูง (เช่น เกิดจากการโต้ตอบของผู้ใช้) การอัปเดตที่ถูกรวบทั้งหมดจะถูกเรนเดอร์ด้วยลำดับความสำคัญสูงนั้น

บทบาทของ Suspense

Suspense ช่วยให้คุณสามารถ “พัก” การเรนเดอร์ของคอมโพเนนต์ในขณะที่กำลังรอข้อมูลโหลด ซึ่งจะป้องกันไม่ให้ UI ค้างในขณะที่กำลังดึงข้อมูล และช่วยให้คุณสามารถแสดง UI สำรอง (fallback UI) ได้ในระหว่างนั้น (เช่น ตัวหมุนโหลด)

เมื่อใช้ร่วมกับคุณสมบัติ Concurrent Suspense จะทำงานร่วมกับการเรนเดอร์ตามลำดับความสำคัญได้อย่างราบรื่น ในขณะที่คอมโพเนนต์ถูกพัก React สามารถเรนเดอร์ส่วนอื่นๆ ของแอปพลิเคชันที่มีลำดับความสำคัญสูงกว่าต่อไปได้ เมื่อข้อมูลโหลดเสร็จแล้ว คอมโพเนนต์ที่ถูกพักจะถูกเรนเดอร์ด้วยลำดับความสำคัญที่ต่ำกว่า เพื่อให้แน่ใจว่า UI ยังคงตอบสนองได้ตลอดกระบวนการ

ตัวอย่าง: import('./DataComponent')); function MyComponent() { return ( Loading data...

}> ); } ```

ในตัวอย่างนี้ `DataComponent` ถูกโหลดแบบ lazy โดยใช้ `React.lazy` ในขณะที่คอมโพเนนต์กำลังถูกโหลด คอมโพเนนต์ `Suspense` จะแสดง `fallback` UI และ React สามารถเรนเดอร์ส่วนอื่นๆ ของแอปพลิเคชันต่อไปได้ในขณะที่ `DataComponent` กำลังโหลด เพื่อให้แน่ใจว่า UI ยังคงตอบสนองได้

ตัวอย่างการใช้งานจริง

เรามาดูตัวอย่างการใช้งานจริงบางส่วนเกี่ยวกับวิธีการใช้การเรนเดอร์ตามลำดับความสำคัญเพื่อปรับปรุงประสบการณ์ผู้ใช้ในสถานการณ์ต่างๆ กัน

1. การจัดการการป้อนข้อมูลของผู้ใช้กับชุดข้อมูลขนาดใหญ่

ลองนึกภาพว่าคุณมีชุดข้อมูลขนาดใหญ่ที่ต้องกรองตามการป้อนข้อมูลของผู้ใช้ หากไม่มีการเรนเดอร์ตามลำดับความสำคัญ การพิมพ์ในช่องป้อนข้อมูลอาจทำให้เกิดการเรนเดอร์ใหม่ของทั้งชุดข้อมูล ซึ่งทำให้ UI หยุดตอบสนอง

การใช้ useTransition คุณสามารถชะลอการกรองข้อมูล ทำให้ช่องป้อนข้อมูลยังคงตอบสนองได้ในขณะที่การกรองกำลังดำเนินการในเบื้องหลัง (ดูตัวอย่างที่ให้ไว้ก่อนหน้านี้ในส่วน 'การใช้ useTransition')

2. การจัดลำดับความสำคัญของแอนิเมชัน

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

แม้ว่าคุณจะไม่สามารถควบคุมลำดับความสำคัญของการอัปเดตแอนิเมชันได้โดยตรง แต่การทำให้แน่ใจว่ามันถูกกระตุ้นโดยตรงจากการโต้ตอบของผู้ใช้ (เช่น เหตุการณ์คลิกที่กระตุ้นแอนิเมชัน) จะทำให้มันมีลำดับความสำคัญสูงขึ้นโดยนัย

ตัวอย่าง:

```javascript import React, { useState } from 'react'; function AnimatedComponent() { const [isAnimating, setIsAnimating] = useState(false); const handleClick = () => { setIsAnimating(true); setTimeout(() => { setIsAnimating(false); }, 1000); // ระยะเวลาของแอนิเมชัน }; return (

Click Me

); } ```

ในตัวอย่างนี้ ฟังก์ชัน `handleClick` กระตุ้นแอนิเมชันโดยตรงโดยการตั้งค่า state `isAnimating` เนื่องจากการอัปเดตนี้เกิดจากการโต้ตอบของผู้ใช้ React จะให้ความสำคัญกับมัน เพื่อให้แน่ใจว่าแอนิเมชันทำงานได้อย่างราบรื่น

3. การดึงข้อมูลและ Suspense

เมื่อดึงข้อมูลจาก API สิ่งสำคัญคือต้องป้องกันไม่ให้ UI ค้างในขณะที่กำลังโหลดข้อมูล การใช้ Suspense คุณสามารถแสดง fallback UI ในขณะที่กำลังดึงข้อมูล และ React จะเรนเดอร์คอมโพเนนต์โดยอัตโนมัติเมื่อข้อมูลพร้อมใช้งาน

(ดูตัวอย่างที่ให้ไว้ก่อนหน้านี้ในส่วน 'บทบาทของ Suspense')

แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำการเรนเดอร์ตามลำดับความสำคัญไปใช้

เพื่อให้สามารถใช้ประโยชน์จากการเรนเดอร์ตามลำดับความสำคัญได้อย่างมีประสิทธิภาพ ควรพิจารณาแนวทางปฏิบัติต่อไปนี้:

• ระบุการอัปเดตที่สำคัญ: วิเคราะห์แอปพลิเคชันของคุณอย่างรอบคอบเพื่อระบุการอัปเดตที่สำคัญที่สุดต่อประสบการณ์ผู้ใช้ (เช่น การป้อนข้อมูลของผู้ใช้, แอนิเมชัน)
• ใช้ useTransition สำหรับการอัปเดตที่ไม่สำคัญ: ชะลอการอัปเดตที่ไม่สำคัญต่อประสบการณ์ของผู้ใช้ในทันทีโดยใช้ hook useTransition
• ใช้ประโยชน์จาก Suspense สำหรับการดึงข้อมูล: ใช้ Suspense เพื่อจัดการการดึงข้อมูลและป้องกันไม่ให้ UI ค้างในขณะที่กำลังโหลดข้อมูล
• เพิ่มประสิทธิภาพการเรนเดอร์ของคอมโพเนนต์: ลดการเรนเดอร์ซ้ำที่ไม่จำเป็นโดยใช้เทคนิคต่างๆ เช่น memoization (React.memo) และหลีกเลี่ยงการอัปเดต state ที่ไม่จำเป็น
• โปรไฟล์แอปพลิเคชันของคุณ: ใช้ React Profiler เพื่อระบุคอขวดของประสิทธิภาพและพื้นที่ที่การเรนเดอร์ตามลำดับความสำคัญจะมีประสิทธิภาพมากที่สุด

ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง

แม้ว่าการเรนเดอร์ตามลำดับความสำคัญจะสามารถปรับปรุงประสิทธิภาพได้อย่างมาก แต่สิ่งสำคัญคือต้องระวังข้อผิดพลาดที่พบบ่อยบางประการ:

• การใช้ useTransition มากเกินไป: การชะลอการอัปเดตมากเกินไปอาจทำให้ UI ตอบสนองได้น้อยลง ควรใช้ useTransition สำหรับการอัปเดตที่ไม่สำคัญจริงๆ เท่านั้น
• การละเลยคอขวดของประสิทธิภาพ: การเรนเดอร์ตามลำดับความสำคัญไม่ใช่ยาวิเศษ สิ่งสำคัญคือต้องแก้ไขปัญหาประสิทธิภาพพื้นฐานในคอมโพเนนต์และตรรกะการดึงข้อมูลของคุณ
• การใช้ Suspense อย่างไม่ถูกต้อง: ตรวจสอบให้แน่ใจว่าขอบเขตของ Suspense ของคุณถูกวางไว้อย่างถูกต้อง และ fallback UI ของคุณให้ประสบการณ์ผู้ใช้ที่ดี
• การละเลยการทำโปรไฟล์: การทำโปรไฟล์เป็นสิ่งจำเป็นสำหรับการระบุคอขวดของประสิทธิภาพและตรวจสอบว่ากลยุทธ์การเรนเดอร์ตามลำดับความสำคัญของคุณมีประสิทธิภาพ

การดีบักปัญหาการเรนเดอร์ตามลำดับความสำคัญ

การดีบักปัญหาที่เกี่ยวข้องกับการเรนเดอร์ตามลำดับความสำคัญอาจเป็นเรื่องท้าทาย เนื่องจากพฤติกรรมของตัวจัดตารางเวลามีความซับซ้อน นี่คือเคล็ดลับบางประการสำหรับการดีบัก:

• ใช้ React Profiler: React Profiler สามารถให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับประสิทธิภาพของแอปพลิเคชันของคุณและช่วยให้คุณระบุการอัปเดตที่ใช้เวลาเรนเดอร์นานเกินไป
• ตรวจสอบสถานะ isPending: หากคุณใช้ useTransition ให้ตรวจสอบสถานะ isPending เพื่อให้แน่ใจว่าการอัปเดตกำลังถูกชะลอตามที่คาดไว้
• ใช้ console.log: เพิ่มคำสั่ง console.log ในคอมโพเนนต์ของคุณเพื่อติดตามว่าเมื่อใดที่มันถูกเรนเดอร์และข้อมูลที่ได้รับ
• ลดความซับซ้อนของแอปพลิเคชัน: หากคุณมีปัญหาในการดีบักแอปพลิเคชันที่ซับซ้อน ให้ลองลดความซับซ้อนโดยการลบคอมโพเนนต์และตรรกะที่ไม่จำเป็นออกไป

สรุป

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

ในขณะที่ระบบนิเวศของ React ยังคงพัฒนาต่อไป การอัปเดตคุณสมบัติและแนวทางปฏิบัติล่าสุดอยู่เสมอเป็นสิ่งสำคัญสำหรับการสร้างเว็บแอปพลิเคชันที่ทันสมัยและมีประสิทธิภาพ การเรียนรู้การเรนเดอร์ตามลำดับความสำคัญจะทำให้คุณพร้อมที่จะรับมือกับความท้าทายในการสร้าง UI ที่ซับซ้อนและมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยม

แหล่งข้อมูลเพื่อการเรียนรู้เพิ่มเติม

• เอกสาร React เกี่ยวกับ Concurrent Mode: https://react.dev/reference/react
• React Profiler: เรียนรู้วิธีใช้ React Profiler เพื่อระบุคอขวดของประสิทธิภาพ
• บทความและบล็อกโพสต์: ค้นหาบทความและบล็อกโพสต์เกี่ยวกับคุณสมบัติ Concurrent ของ React และการเรนเดอร์ตามลำดับความสำคัญบนแพลตฟอร์มต่างๆ เช่น Medium, Dev.to และบล็อกอย่างเป็นทางการของ React
• คอร์สเรียนออนไลน์: พิจารณาลงเรียนคอร์สออนไลน์ที่ครอบคลุมคุณสมบัติ Concurrent ของ React โดยละเอียด