// สมมติว่ามีฟังก์ชัน fetchData ที่คืนค่า Promise
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// hook สำหรับดึงข้อมูลที่รองรับ Suspense (สมมติ)
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // นี่คือสิ่งที่ Suspense ดักจับ
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // การเรียกนี้อาจทำให้เกิดการ suspend
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

2. การรวมอัปเดตอัตโนมัติ (Automatic Batching)

Batching คือกระบวนการรวมการอัปเดต state หลายรายการให้เป็นการ re-render เพียงครั้งเดียว แต่เดิม React จะทำการ batch เฉพาะการอัปเดตที่เกิดขึ้นภายใน event handlers เท่านั้น การอัปเดตที่เริ่มต้นนอก event handlers (เช่น ภายใน promises หรือ `setTimeout`) จะไม่ถูก batch ซึ่งนำไปสู่การ re-render ที่ไม่จำเป็น

ทำงานร่วมกับ concurrency อย่างไร: ด้วย Concurrent Mode, React จะทำการ batch การอัปเดต state ทั้งหมดโดยอัตโนมัติ ไม่ว่าจะมาจากที่ใดก็ตาม ซึ่งหมายความว่าหากคุณมีการอัปเดต state หลายครั้งที่เกิดขึ้นอย่างรวดเร็ว (เช่น จากการทำงานแบบอะซิงโครนัสหลายอย่างที่เสร็จสิ้น) React จะรวมพวกมันและทำการ re-render เพียงครั้งเดียว ซึ่งช่วยปรับปรุงประสิทธิภาพและลดภาระงานจากการเรนเดอร์หลายรอบ

ตัวอย่าง: สมมติว่าคุณกำลังดึงข้อมูลจาก API สองแห่งที่แตกต่างกัน เมื่อทั้งสองเสร็จสิ้น คุณจะอัปเดต state สองส่วนแยกกัน ใน React เวอร์ชันเก่า นี่อาจทำให้เกิดการ re-render สองครั้ง ใน Concurrent Mode การอัปเดตเหล่านี้จะถูกรวมเข้าด้วยกัน ส่งผลให้เกิดการ re-render เพียงครั้งเดียวที่มีประสิทธิภาพมากขึ้น

3. Transitions

Transitions เป็นแนวคิดใหม่ที่ถูกนำมาใช้เพื่อแยกแยะระหว่างการอัปเดตที่เร่งด่วนและไม่เร่งด่วน นี่คือกลไกหลักสำหรับการเปิดใช้งาน interruptible rendering

การอัปเดตที่เร่งด่วน (Urgent Updates): คือการอัปเดตที่ต้องการการตอบสนองทันที เช่น การพิมพ์ในช่องอินพุต การคลิกปุ่ม หรือการจัดการองค์ประกอบ UI โดยตรง ควรรู้สึกว่าเกิดขึ้นทันที

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

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

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

ตัวอย่างโค้ด (เพื่อการอธิบาย):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // ทำเครื่องหมายการอัปเดตนี้เป็น transition
    startTransition(() => {
      // จำลองการดึงผลลัพธ์ ซึ่งสามารถถูกขัดจังหวะได้
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

4. การบูรณาการกับไลบรารีและ Ecosystem

ประโยชน์ของ Concurrent Mode ไม่ได้จำกัดอยู่แค่ฟีเจอร์หลักของ React แต่ ecosystem ทั้งหมดกำลังปรับตัว ไลบรารีที่ทำงานร่วมกับ React เช่น โซลูชันการกำหนดเส้นทาง (routing) หรือเครื่องมือจัดการ state ก็สามารถใช้ประโยชน์จาก concurrency เพื่อมอบประสบการณ์ที่ราบรื่นยิ่งขึ้นได้เช่นกัน

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

วิธีเปิดใช้งานและใช้คุณสมบัติ Concurrent

แม้ว่า Concurrent Mode จะเป็นการเปลี่ยนแปลงพื้นฐาน แต่การเปิดใช้งานคุณสมบัติต่าง ๆ โดยทั่วไปนั้นตรงไปตรงมาและมักต้องมีการเปลี่ยนแปลงโค้ดเพียงเล็กน้อย โดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชันใหม่หรือเมื่อนำฟีเจอร์อย่าง Suspense และ Transitions มาใช้

1. เวอร์ชันของ React

คุณสมบัติ Concurrent มีให้ใช้งานใน React 18 ขึ้นไป ตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชันที่เข้ากันได้:

npm install react@latest react-dom@latest

2. Root API (`createRoot`)

วิธีหลักในการเลือกใช้คุณสมบัติ concurrent คือการใช้ `createRoot` API ใหม่เมื่อทำการ mount แอปพลิเคชันของคุณ:

// index.js หรือ main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

การใช้ `createRoot` จะเปิดใช้งานคุณสมบัติ concurrent ทั้งหมดโดยอัตโนมัติ รวมถึง automatic batching, transitions และ Suspense

หมายเหตุ: `ReactDOM.render` API แบบเก่าไม่รองรับคุณสมบัติ concurrent การย้ายไปใช้ `createRoot` เป็นขั้นตอนสำคัญในการปลดล็อก concurrency

3. การใช้งาน Suspense

ตามที่แสดงไว้ก่อนหน้านี้ การใช้งาน Suspense ทำได้โดยการครอบคอมโพเนนต์ที่ทำงานแบบอะซิงโครนัสด้วย <Suspense> และกำหนด fallback prop

แนวทางปฏิบัติที่ดีที่สุด:

• ซ้อน <Suspense> เพื่อจัดการสถานะการโหลดอย่างละเอียด
• ใช้ custom hooks ที่ทำงานร่วมกับ Suspense เพื่อตรรกะการดึงข้อมูลที่สะอาดขึ้น
• พิจารณาใช้ไลบรารีเช่น Relay หรือ Apollo Client ซึ่งรองรับ Suspense เป็นอย่างดี

4. การใช้ Transitions (`startTransition`)

ระบุการอัปเดต UI ที่ไม่เร่งด่วนและครอบด้วย startTransition

ควรใช้เมื่อใด:

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

ตัวอย่าง: สำหรับการกรองที่ซับซ้อนของชุดข้อมูลขนาดใหญ่ที่แสดงในตาราง คุณจะตั้งค่า state ของคำค้นหาตัวกรองแล้วเรียก `startTransition` สำหรับการกรองและการ re-render แถวตารางจริง สิ่งนี้ช่วยให้มั่นใจได้ว่าหากผู้ใช้เปลี่ยนเกณฑ์การกรองอย่างรวดเร็วอีกครั้ง การดำเนินการกรองก่อนหน้าสามารถถูกขัดจังหวะได้อย่างปลอดภัย

ประโยชน์ของ Interruptible Rendering สำหรับผู้ใช้ทั่วโลก

ข้อดีของ interruptible rendering และ Concurrent Mode จะยิ่งเด่นชัดขึ้นเมื่อพิจารณาฐานผู้ใช้ทั่วโลกที่มีเงื่อนไขเครือข่ายและความสามารถของอุปกรณ์ที่หลากหลาย

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

พิจารณาแอปเรียนภาษาที่นักเรียนทั่วโลกใช้ หากนักเรียนคนหนึ่งกำลังดาวน์โหลดบทเรียนใหม่ (ซึ่งอาจเป็นงานที่ใช้เวลานาน) ในขณะที่อีกคนกำลังพยายามตอบคำถามคำศัพท์สั้น ๆ interruptible rendering จะช่วยให้มั่นใจได้ว่าคำถามคำศัพท์จะได้รับการตอบทันที แม้ว่าการดาวน์โหลดจะยังดำเนินอยู่ก็ตาม ซึ่งเป็นสิ่งสำคัญสำหรับเครื่องมือทางการศึกษาที่การตอบสนองทันทีมีความสำคัญต่อการเรียนรู้

ความท้าทายและข้อควรพิจารณาที่อาจเกิดขึ้น

แม้ว่า Concurrent Mode จะมีข้อดีมากมาย แต่การนำไปใช้ก็มีช่วงการเรียนรู้และข้อควรพิจารณาบางประการ:

• การดีบัก (Debugging): การดีบักการทำงานแบบอะซิงโครนัสและขัดจังหวะได้อาจท้าทายกว่าการดีบักโค้ดแบบซิงโครนัส การทำความเข้าใจลำดับการทำงานและเวลาที่งานอาจถูกหยุดชั่วคราวหรือกลับมาทำงานต่อต้องใช้ความใส่ใจอย่างระมัดระวัง
• การปรับเปลี่ยนวิธีคิด (Mental Model Shift): นักพัฒนาต้องปรับความคิดจากโมเดลการทำงานแบบตามลำดับ ไปสู่แนวทางที่เน้น concurrency และขับเคลื่อนด้วยเหตุการณ์มากขึ้น การทำความเข้าใจผลกระทบของ `startTransition` และ Suspense เป็นกุญแจสำคัญ
• ไลบรารีภายนอก (External Libraries): ไม่ใช่ทุกไลบรารีของบุคคลที่สามที่จะได้รับการอัปเดตให้รองรับ concurrency การใช้ไลบรารีรุ่นเก่าที่ดำเนินการแบบบล็อกอาจยังคงทำให้ UI ค้างได้ สิ่งสำคัญคือต้องแน่ใจว่า dependencies ของคุณเข้ากันได้
• การจัดการ State (State Management): ในขณะที่คุณสมบัติ concurrency ในตัวของ React ทรงพลัง สถานการณ์การจัดการ state ที่ซับซ้อนอาจต้องพิจารณาอย่างรอบคอบเพื่อให้แน่ใจว่าการอัปเดตทั้งหมดได้รับการจัดการอย่างถูกต้องและมีประสิทธิภาพภายในกรอบการทำงานแบบ concurrent

อนาคตของ React Concurrency

การเดินทางของ React สู่ concurrency ยังคงดำเนินต่อไป ทีมงานยังคงปรับปรุงตัวจัดตารางเวลา, นำเสนอ API ใหม่ ๆ, และปรับปรุงประสบการณ์ของนักพัฒนา คุณสมบัติต่าง ๆ เช่น Offscreen API (ซึ่งช่วยให้คอมโพเนนต์สามารถเรนเดอร์ได้โดยไม่ส่งผลกระทบต่อ UI ที่ผู้ใช้รับรู้ เหมาะสำหรับการเรนเดอร์ล่วงหน้าหรืองานเบื้องหลัง) กำลังขยายความเป็นไปได้ของสิ่งที่สามารถทำได้ด้วยการเรนเดอร์แบบ concurrent

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

สรุป

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

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

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

ประเด็นสำคัญ:

• Concurrent Mode ของ React ช่วยให้สามารถเรนเดอร์แบบขัดจังหวะได้ หลุดพ้นจากการบล็อกแบบซิงโครนัส
• คุณสมบัติต่าง ๆ เช่น Suspense, automatic batching และ Transitions สร้างขึ้นบนรากฐานของ concurrent นี้
• ใช้ createRoot เพื่อเปิดใช้งานคุณสมบัติ concurrent
• ระบุและทำเครื่องหมายการอัปเดตที่ไม่เร่งด่วนด้วย startTransition
• การเรนเดอร์แบบ concurrent ช่วยปรับปรุง UX สำหรับผู้ใช้ทั่วโลกอย่างมีนัยสำคัญ โดยเฉพาะอย่างยิ่งในเงื่อนไขเครือข่ายและอุปกรณ์ที่หลากหลาย
• ติดตามคุณสมบัติ concurrency ที่พัฒนาอย่างต่อเนื่องของ React เพื่อประสิทธิภาพสูงสุด

เริ่มสำรวจ Concurrent Mode ในโปรเจกต์ของคุณวันนี้ และสร้างแอปพลิเคชันที่เร็วขึ้น ตอบสนองได้ดีขึ้น และน่าพึงพอใจยิ่งขึ้นสำหรับทุกคน