import React, { experimental_useCache, Suspense } from 'react';

// จำลองการเรียก API (แทนที่ด้วย API endpoint จริงของคุณ)
const fetchUserData = async (userId) => {
  console.log(`กำลังดึงข้อมูลผู้ใช้สำหรับ ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // จำลองความล่าช้าของเครือข่าย
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`ไม่สามารถดึงข้อมูลผู้ใช้ได้: ${response.status}`);
  }
  return response.json();
};

// สร้างฟังก์ชัน fetchUserData เวอร์ชันที่แคชไว้
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
โปรไฟล์ผู้ใช้
      
ชื่อ: {userData.name}
      
อีเมล: {userData.email}
    
  );
}

function App() {
  return (
    กำลังโหลดข้อมูลผู้ใช้...

คำอธิบาย:

1. นำเข้า experimental_useCache: เรานำเข้า hook ที่จำเป็นจาก React
2. กำหนด fetchUserData: ฟังก์ชันนี้จำลองการดึงข้อมูลผู้ใช้จาก API แทนที่การเรียก API จำลองด้วยลอจิกการดึงข้อมูลจริงของคุณ await new Promise ใช้จำลองความล่าช้าของเครือข่าย ทำให้เห็นผลของการแคชชัดเจนขึ้น มีการจัดการข้อผิดพลาดเพื่อความพร้อมในการใช้งานจริง
3. สร้าง getCachedUserData: เราใช้ experimental_useCache เพื่อสร้างเวอร์ชันที่แคชไว้ของฟังก์ชัน fetchUserData นี่คือฟังก์ชันที่เราจะใช้ในคอมโพเนนต์ของเรา
4. ใช้ getCachedUserData ใน UserProfile: คอมโพเนนต์ UserProfile เรียกใช้ getCachedUserData เพื่อดึงข้อมูลผู้ใช้ เนื่องจากเราใช้ experimental_useCache ข้อมูลจะถูกดึงจากแคชหากมีอยู่แล้ว
5. ห่อด้วย Suspense: คอมโพเนนต์ UserProfile ถูกห่อด้วย Suspense เพื่อจัดการสถานะการโหลดในขณะที่กำลังดึงข้อมูล สิ่งนี้ช่วยให้ประสบการณ์ผู้ใช้ราบรื่น แม้ว่าข้อมูลจะใช้เวลาในการโหลดนาน
6. การเรียกหลายครั้ง: คอมโพเนนต์ App เรนเดอร์คอมโพเนนต์ UserProfile สองตัวด้วย userId เดียวกัน (1) คอมโพเนนต์ UserProfile ตัวที่สองจะใช้ข้อมูลที่แคชไว้ ซึ่งหลีกเลี่ยงการเรียก API ครั้งที่สอง นอกจากนี้ยังรวมโปรไฟล์ผู้ใช้อื่นที่มี ID ที่แตกต่างกันเพื่อสาธิตการดึงข้อมูลที่ยังไม่ได้แคช

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

การผสานรวมกับ Suspense

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

ในตัวอย่างข้างต้น คอมโพเนนต์ Suspense ห่อหุ้มคอมโพเนนต์ UserProfile และมี prop fallback UI สำรองนี้จะแสดงในขณะที่กำลังดึงข้อมูลผู้ใช้ เมื่อข้อมูลพร้อมใช้งานแล้ว คอมโพเนนต์ UserProfile จะถูกเรนเดอร์พร้อมกับข้อมูลที่ดึงมา

React Server Components (RSCs) และ experimental_useCache

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

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

ตัวอย่าง (ตัวอย่าง RSC เชิงแนวคิด):

// Server Component
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // จำลองการดึงข้อมูลผู้ใช้จากฐานข้อมูล
  await new Promise(resolve => setTimeout(resolve, 500)); // จำลองความล่าช้าในการค้นหาฐานข้อมูล
  return { id: userId, name: `User ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
ยินดีต้อนรับ, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
ข้อมูลผู้ใช้
      
อีเมล: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
กิจกรรมล่าสุด
      
{userData.name} ได้ดูหน้าแรก
    
  );
}

ในตัวอย่างง่ายๆ นี้ UserDashboard, UserInfo, และ UserActivity ล้วนเป็น Server Components และทั้งหมดต้องการเข้าถึงข้อมูลผู้ใช้ การใช้ experimental_useCache ทำให้มั่นใจได้ว่าฟังก์ชัน fetchUserData จะถูกเรียกเพียงครั้งเดียวต่อหนึ่งคำขอของเซิร์ฟเวอร์ แม้ว่าจะถูกใช้ในหลายคอมโพเนนต์ก็ตาม

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

แม้ว่า experimental_useCache จะมีประโยชน์อย่างมาก แต่สิ่งสำคัญคือต้องตระหนักถึงข้อจำกัดและข้อเสียที่อาจเกิดขึ้น:

• สถานะทดลอง (Experimental Status): เนื่องจากเป็น API ที่ยังอยู่ในขั้นทดลอง experimental_useCache อาจมีการเปลี่ยนแปลงหรือถูกลบออกใน React เวอร์ชันอนาคต ควรใช้อย่างระมัดระวังในสภาพแวดล้อมการใช้งานจริง (production) และเตรียมพร้อมที่จะปรับแก้โค้ดของคุณหากจำเป็น ควรติดตามเอกสารอย่างเป็นทางการและบันทึกการเปลี่ยนแปลงของ React สำหรับการอัปเดต
• การทำให้แคชเป็นโมฆะ (Cache Invalidation): experimental_useCache ไม่มีกลไกในตัวสำหรับการทำให้แคชเป็นโมฆะ คุณจะต้องใช้กลยุทธ์ของคุณเองในการทำให้แคชเป็นโมฆะเมื่อข้อมูลพื้นฐานเปลี่ยนแปลง ซึ่งอาจเกี่ยวข้องกับการใช้ custom hooks หรือ context providers เพื่อจัดการอายุการใช้งานของแคช
• การใช้หน่วยความจำ (Memory Usage): การแคชข้อมูลสามารถเพิ่มการใช้หน่วยความจำได้ ควรคำนึงถึงขนาดของข้อมูลที่คุณกำลังแคชและพิจารณาใช้เทคนิคต่างๆ เช่น การลบแคช (cache eviction) หรือการหมดอายุ (expiration) เพื่อจำกัดการใช้หน่วยความจำ ควรตรวจสอบการใช้หน่วยความจำในแอปพลิเคชันของคุณ โดยเฉพาะในสภาพแวดล้อมฝั่งเซิร์ฟเวอร์
• การทำ Serialization ของอาร์กิวเมนต์: อาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันที่แคชไว้จะต้องสามารถทำ serialization ได้ เนื่องจาก experimental_useCache ใช้อาร์กิวเมนต์เหล่านี้ในการสร้างคีย์แคช หากอาร์กิวเมนต์ไม่สามารถทำ serialization ได้ แคชอาจทำงานไม่ถูกต้อง
• การดีบัก (Debugging): การดีบักปัญหาที่เกี่ยวข้องกับแคชอาจเป็นเรื่องท้าทาย ควรใช้เครื่องมือบันทึก (logging) และดีบักเพื่อตรวจสอบแคชและยืนยันว่าทำงานตามที่คาดไว้ ลองพิจารณาเพิ่มการบันทึกการดีบักแบบกำหนดเองลงในฟังก์ชัน fetchUserData ของคุณเพื่อติดตามว่าข้อมูลถูกดึงเมื่อใดและเมื่อใดที่ถูกดึงมาจากแคช
• สถานะส่วนกลาง (Global State): หลีกเลี่ยงการใช้ state ส่วนกลางที่เปลี่ยนแปลงได้ (mutable) ภายในฟังก์ชันที่แคชไว้ ซึ่งอาจนำไปสู่พฤติกรรมที่ไม่คาดคิดและทำให้ยากต่อการทำความเข้าใจเกี่ยวกับแคช ควรอาศัยอาร์กิวเมนต์ของฟังก์ชันและผลลัพธ์ที่แคชไว้เพื่อรักษาสถานะที่สอดคล้องกัน
• โครงสร้างข้อมูลที่ซับซ้อน: ควรระมัดระวังเมื่อแคชโครงสร้างข้อมูลที่ซับซ้อน โดยเฉพาะอย่างยิ่งหากมีการอ้างอิงแบบวงกลม (circular references) การอ้างอิงแบบวงกลมอาจนำไปสู่วงวนไม่สิ้นสุด (infinite loops) หรือข้อผิดพลาด stack overflow ระหว่างการทำ serialization

กลยุทธ์การทำให้แคชเป็นโมฆะ (Cache Invalidation Strategies)

เนื่องจาก experimental_useCache ไม่ได้จัดการการทำให้เป็นโมฆะ นี่คือกลยุทธ์บางส่วนที่คุณสามารถนำไปใช้ได้:

• การทำให้เป็นโมฆะด้วยตนเอง (Manual Invalidation): สร้าง custom hook หรือ context provider เพื่อติดตามการเปลี่ยนแปลงข้อมูล (mutations) เมื่อมีการเปลี่ยนแปลงเกิดขึ้น ให้ทำให้แคชเป็นโมฆะโดยการรีเซ็ตฟังก์ชันที่แคชไว้ ซึ่งเกี่ยวข้องกับการเก็บเวอร์ชันหรือ timestamp ที่เปลี่ยนแปลงเมื่อมีการแก้ไขและตรวจสอบค่านี้ภายในฟังก์ชัน `fetch`

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("กำลังดึงข้อมูลด้วยเวอร์ชัน:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `ข้อมูลสำหรับเวอร์ชัน ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // เรียกใช้แคช
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // ตัวอย่างการใช้งาน:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return ทำให้แคชเป็นโมฆะ
       }
  
       // ห่อหุ้ม App ของคุณด้วย DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• การหมดอายุตามเวลา (Time-Based Expiration): สร้างกลไกการหมดอายุของแคชที่จะทำให้แคชเป็นโมฆะโดยอัตโนมัติหลังจากช่วงเวลาที่กำหนด ซึ่งมีประโยชน์สำหรับข้อมูลที่ค่อนข้างคงที่แต่อาจมีการเปลี่ยนแปลงเป็นครั้งคราว
• การทำให้เป็นโมฆะตามแท็ก (Tag-Based Invalidation): เชื่อมโยงแท็กกับข้อมูลที่แคชไว้และทำให้แคชเป็นโมฆะตามแท็กเหล่านี้ ซึ่งมีประโยชน์สำหรับการทำให้ข้อมูลที่เกี่ยวข้องเป็นโมฆะเมื่อข้อมูลชิ้นใดชิ้นหนึ่งเปลี่ยนแปลง
• WebSockets และการอัปเดตแบบเรียลไทม์: หากแอปพลิเคชันของคุณใช้ WebSockets หรือกลไกการอัปเดตแบบเรียลไทม์อื่นๆ คุณสามารถใช้การอัปเดตเหล่านี้เพื่อกระตุ้นการทำให้แคชเป็นโมฆะได้ เมื่อได้รับการอัปเดตแบบเรียลไทม์ ให้ทำให้แคชสำหรับข้อมูลที่ได้รับผลกระทบเป็นโมฆะ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ experimental_useCache

เพื่อการใช้งาน experimental_useCache อย่างมีประสิทธิภาพและหลีกเลี่ยงข้อผิดพลาดที่อาจเกิดขึ้น ควรปฏิบัติตามแนวทางที่ดีที่สุดเหล่านี้:

• ใช้สำหรับการทำงานที่สิ้นเปลืองทรัพยากร: ใช้ experimental_useCache สำหรับการทำงานที่สิ้นเปลืองทรัพยากรจริงๆ เท่านั้น เช่น การดึงข้อมูลหรือการคำนวณที่ซับซ้อน การแคชการทำงานที่ไม่สิ้นเปลืองทรัพยากรอาจทำให้ประสิทธิภาพลดลงได้เนื่องจากภาระในการจัดการแคช
• กำหนดคีย์แคชที่ชัดเจน: ตรวจสอบให้แน่ใจว่าอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันที่แคชไว้สามารถระบุข้อมูลที่กำลังแคชได้อย่างไม่ซ้ำกัน สิ่งนี้สำคัญอย่างยิ่งเพื่อให้แน่ใจว่าแคชทำงานได้อย่างถูกต้องและข้อมูลไม่ถูกนำกลับมาใช้โดยไม่ได้ตั้งใจ สำหรับอาร์กิวเมนต์ที่เป็นออบเจกต์ ลองพิจารณาทำ serialization และ hashing เพื่อสร้างคีย์ที่สอดคล้องกัน
• ใช้กลยุทธ์การทำให้แคชเป็นโมฆะ: ดังที่ได้กล่าวไว้ก่อนหน้านี้ คุณจะต้องใช้กลยุทธ์ของคุณเองในการทำให้แคชเป็นโมฆะเมื่อข้อมูลพื้นฐานเปลี่ยนแปลง ควรเลือกกลยุทธ์ที่เหมาะสมกับแอปพลิเคชันและข้อมูลของคุณ
• ติดตามประสิทธิภาพของแคช: ติดตามประสิทธิภาพของแคชของคุณเพื่อให้แน่ใจว่าทำงานตามที่คาดไว้ ใช้เครื่องมือบันทึกและดีบักเพื่อติดตาม cache hits และ misses และระบุคอขวดที่อาจเกิดขึ้น
• พิจารณาทางเลือกอื่น: ก่อนที่จะใช้ experimental_useCache ลองพิจารณาว่าโซลูชันการแคชอื่นๆ อาจเหมาะสมกับความต้องการของคุณมากกว่าหรือไม่ ตัวอย่างเช่น หากคุณต้องการโซลูชันการแคชที่มีความสามารถสูงพร้อมคุณสมบัติในตัว เช่น การทำให้แคชเป็นโมฆะและการลบแคช คุณอาจพิจารณาใช้ไลบรารีการแคชโดยเฉพาะ เช่น react-query, SWR หรือแม้กระทั่งการใช้ localStorage ก็อาจเหมาะสมกว่าในบางครั้ง
• เริ่มจากจุดเล็กๆ: นำ experimental_useCache มาใช้ในแอปพลิเคชันของคุณทีละน้อย เริ่มต้นด้วยการแคชการดำเนินการดึงข้อมูลที่สำคัญบางส่วนและค่อยๆ ขยายการใช้งานเมื่อคุณมีประสบการณ์มากขึ้น
• จัดทำเอกสารเกี่ยวกับกลยุทธ์การแคชของคุณ: จัดทำเอกสารเกี่ยวกับกลยุทธ์การแคชของคุณอย่างชัดเจน รวมถึงข้อมูลใดที่ถูกแคช, แคชถูกทำให้เป็นโมฆะอย่างไร, และข้อจำกัดที่อาจเกิดขึ้น สิ่งนี้จะช่วยให้นักพัฒนาคนอื่นๆ เข้าใจและบำรุงรักษาโค้ดของคุณได้ง่ายขึ้น
• ทดสอบอย่างละเอียด: ทดสอบการใช้งานแคชของคุณอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและไม่ก่อให้เกิดบั๊กที่ไม่คาดคิด เขียน unit tests เพื่อตรวจสอบว่าแคชถูกสร้างและทำให้เป็นโมฆะตามที่คาดไว้

ทางเลือกอื่นนอกเหนือจาก experimental_useCache

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

• useMemo: hook useMemo สามารถใช้เพื่อ memoize ผลลัพธ์ของการคำนวณที่สิ้นเปลืองทรัพยากร แม้ว่าจะไม่ได้ให้การแคชที่แท้จริงข้ามการเรนเดอร์ แต่ก็มีประโยชน์ในการเพิ่มประสิทธิภาพภายในคอมโพเนนต์เดียว ไม่เหมาะสำหรับการดึงข้อมูลหรือสถานการณ์ที่ต้องแชร์ข้อมูลระหว่างคอมโพเนนต์
• React.memo: React.memo เป็น higher-order component ที่สามารถใช้เพื่อ memoize functional components ช่วยป้องกันการเรนเดอร์ซ้ำของคอมโพเนนต์หาก props ของมันไม่เปลี่ยนแปลง ซึ่งสามารถปรับปรุงประสิทธิภาพได้ในบางกรณี แต่ไม่ได้ให้การแคชข้อมูล
• ไลบรารีการแคชภายนอก (react-query, SWR): ไลบรารีอย่าง react-query และ SWR ให้บริการโซลูชันการดึงข้อมูลและการแคชที่ครอบคลุมสำหรับแอปพลิเคชัน React ไลบรารีเหล่านี้มีคุณสมบัติต่างๆ เช่น การทำให้แคชเป็นโมฆะโดยอัตโนมัติ, การดึงข้อมูลเบื้องหลัง, และ optimistic updates ซึ่งอาจเป็นตัวเลือกที่ดีหากคุณต้องการโซลูชันการแคชที่มีความสามารถสูงพร้อมคุณสมบัติขั้นสูง
• Local Storage / Session Storage: สำหรับกรณีการใช้งานที่ง่ายกว่าหรือการคงข้อมูลข้ามเซสชัน สามารถใช้ localStorage หรือ sessionStorage ได้ อย่างไรก็ตาม จำเป็นต้องจัดการการทำ serialization, การทำให้เป็นโมฆะ, และข้อจำกัดของพื้นที่จัดเก็บด้วยตนเอง
• โซลูชันการแคชแบบกำหนดเอง: คุณยังสามารถสร้างโซลูชันการแคชแบบกำหนดเองของคุณเองได้โดยใช้ context API ของ React หรือเทคนิคการจัดการ state อื่นๆ ซึ่งจะทำให้คุณสามารถควบคุมการใช้งานแคชได้อย่างสมบูรณ์ แต่ก็ต้องใช้ความพยายามและความเชี่ยวชาญมากขึ้น

สรุป

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

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

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