React Concurrent Mode: ไขข้อข้องใจการเรนเดอร์ที่ขัดจังหวะได้เพื่อประสบการณ์ผู้ใช้ที่เหนือกว่า

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

ทำความเข้าใจถึงความจำเป็นของ Concurrent Mode

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

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

แนวคิดหลักของ Concurrent Mode

1. การเรนเดอร์ที่ขัดจังหวะได้ (Interruptible Rendering)

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

2. ลำดับความสำคัญ (Priorities)

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

3. สถาปัตยกรรม Fiber (Fiber Architecture)

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

4. การเรนเดอร์แบบอะซิงโครนัส (Asynchronous Rendering)

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

5. Suspense

Suspense เป็นคอมโพเนนต์ที่มาพร้อมกับ React ซึ่งช่วยให้คุณสามารถ "พัก" (suspend) การเรนเดอร์ในขณะที่รอการทำงานแบบอะซิงโครนัส เช่น การดึงข้อมูล แทนที่จะแสดงหน้าจอว่างเปล่าหรือสปินเนอร์ Suspense สามารถแสดง UI สำรอง (fallback UI) ในขณะที่กำลังโหลดข้อมูลได้ ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้โดยการให้ข้อเสนอแนะทางภาพและป้องกันไม่ให้ UI รู้สึกว่าไม่ตอบสนอง ลองนึกภาพฟีดโซเชียลมีเดีย: Suspense สามารถแสดง placeholder สำหรับแต่ละโพสต์ในขณะที่เนื้อหาจริงกำลังถูกดึงมาจากเซิร์ฟเวอร์

6. Transitions

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

ประโยชน์ของการใช้ Concurrent Mode

• การตอบสนองที่ดีขึ้น: ด้วยการอนุญาตให้ React ขัดจังหวะการเรนเดอร์และจัดลำดับความสำคัญของงานเร่งด่วน Concurrent Mode ช่วยปรับปรุงการตอบสนองของแอปพลิเคชันของคุณได้อย่างมาก โดยเฉพาะอย่างยิ่งภายใต้ภาระงานหนัก ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่นและน่าพึงพอใจยิ่งขึ้น
• ประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น: การใช้ Suspense และ Transitions ช่วยให้คุณสร้างอินเทอร์เฟซที่สวยงามและใช้งานง่ายขึ้น ผู้ใช้จะเห็นการตอบสนองต่อการกระทำของตนทันที แม้ในขณะที่ต้องจัดการกับการทำงานแบบอะซิงโครนัส
• ประสิทธิภาพที่ดีขึ้น: Concurrent Mode ช่วยให้ React ใช้เวลาว่างได้อย่างมีประสิทธิภาพมากขึ้น ทำให้ประสิทธิภาพโดยรวมดีขึ้น ด้วยการแบ่งการอัปเดตขนาดใหญ่ออกเป็นหน่วยงานย่อยๆ React สามารถหลีกเลี่ยงการบล็อกเธรดหลักและทำให้ UI ตอบสนองอยู่เสมอ
• Code Splitting และ Lazy Loading: Concurrent Mode ทำงานร่วมกับ code splitting และ lazy loading ได้อย่างราบรื่น ช่วยให้คุณโหลดเฉพาะโค้ดที่จำเป็นสำหรับมุมมองปัจจุบันเท่านั้น ซึ่งสามารถลดเวลาในการโหลดเริ่มต้นของแอปพลิเคชันของคุณได้อย่างมาก
• Server Components (อนาคต): Concurrent Mode เป็นข้อกำหนดเบื้องต้นสำหรับ Server Components ซึ่งเป็นฟีเจอร์ใหม่ที่ช่วยให้คุณสามารถเรนเดอร์คอมโพเนนต์บนเซิร์ฟเวอร์ได้ Server Components สามารถปรับปรุงประสิทธิภาพโดยการลดปริมาณ JavaScript ที่ต้องดาวน์โหลดและเรียกใช้งานบนฝั่งไคลเอ็นต์

การนำ Concurrent Mode ไปใช้ในแอปพลิเคชัน React ของคุณ

การเปิดใช้งาน Concurrent Mode ในแอปพลิเคชัน React ของคุณนั้นค่อนข้างตรงไปตรงมา กระบวนการจะขึ้นอยู่กับว่าคุณใช้ Create React App หรือการตั้งค่า build แบบกำหนดเอง

การใช้ Create React App

หากคุณใช้ Create React App คุณสามารถเปิดใช้งาน Concurrent Mode ได้โดยการอัปเดตไฟล์ `index.js` ของคุณให้ใช้ `createRoot` API แทน `ReactDOM.render` API

// ก่อนหน้า:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// หลังจาก:
import { createRoot } from 'react-dom/client';
import App from './App';

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

การใช้การตั้งค่า Build แบบกำหนดเอง

หากคุณใช้การตั้งค่า build แบบกำหนดเอง คุณจะต้องแน่ใจว่าคุณใช้ React 18 หรือใหม่กว่า และการกำหนดค่า build ของคุณรองรับ Concurrent Mode นอกจากนี้ คุณยังต้องอัปเดตไฟล์ `index.js` ของคุณให้ใช้ `createRoot` API ดังที่แสดงไว้ข้างต้น

การใช้ Suspense สำหรับการดึงข้อมูล

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

นี่คือตัวอย่างการใช้ Suspense กับฟังก์ชัน `fetchData` สมมติ:

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // สมมติว่า fetchData() คืนค่าออบเจ็กต์ที่คล้าย Promise
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Loading...

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Value: {value}
   {isPending && 
Updating...
}
  
 );
}

export default MyComponent;