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

// Mô phỏng một lệnh gọi API (thay thế bằng endpoint API thực tế của bạn)
const fetchUserData = async (userId) => {
  console.log(`Đang tìm nạp dữ liệu người dùng cho ID: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // Mô phỏng độ trễ mạng
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Không thể tìm nạp dữ liệu người dùng: ${response.status}`);
  }
  return response.json();
};

// Tạo một phiên bản đã được cache của hàm fetchUserData
const getCachedUserData = experimental_useCache(fetchUserData);

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

  return (
    

      
Hồ sơ người dùng
      
Tên: {userData.name}
      
Email: {userData.email}
    
  );
}

function App() {
  return (
    Đang tải dữ liệu người dùng...

Giải thích:

1. Nhập experimental_useCache: Chúng ta nhập hook cần thiết từ React.
2. Định nghĩa fetchUserData: Hàm này mô phỏng việc tìm nạp dữ liệu người dùng từ một API. Hãy thay thế lệnh gọi API giả bằng logic tìm nạp dữ liệu thực tế của bạn. await new Promise mô phỏng độ trễ mạng, làm cho hiệu quả của việc caching trở nên rõ ràng hơn. Việc xử lý lỗi được bao gồm để sẵn sàng cho môi trường sản phẩm.
3. Tạo getCachedUserData: Chúng ta sử dụng experimental_useCache để tạo một phiên bản đã được cache của hàm fetchUserData. Đây là hàm mà chúng ta sẽ thực sự sử dụng trong thành phần của mình.
4. Sử dụng getCachedUserData trong UserProfile: Thành phần UserProfile gọi getCachedUserData để lấy dữ liệu người dùng. Vì chúng ta đang sử dụng experimental_useCache, dữ liệu sẽ được lấy từ bộ nhớ đệm nếu nó đã có sẵn.
5. Bọc với Suspense: Thành phần UserProfile được bọc bởi Suspense để xử lý trạng thái tải trong khi dữ liệu đang được tìm nạp. Điều này đảm bảo trải nghiệm người dùng mượt mà, ngay cả khi dữ liệu mất một chút thời gian để tải.
6. Nhiều lần gọi: Thành phần App render hai thành phần UserProfile với cùng userId (1). Thành phần UserProfile thứ hai sẽ sử dụng dữ liệu đã được cache, tránh một lệnh gọi API thứ hai. Nó cũng bao gồm một hồ sơ người dùng khác với ID khác để minh họa việc tìm nạp dữ liệu chưa được cache.

Trong ví dụ này, thành phần UserProfile đầu tiên sẽ tìm nạp dữ liệu người dùng từ API. Tuy nhiên, thành phần UserProfile thứ hai sẽ sử dụng dữ liệu đã được cache, tránh một lệnh gọi API thứ hai. Điều này có thể cải thiện đáng kể hiệu năng, đặc biệt nếu lệnh gọi API tốn kém hoặc nếu dữ liệu được nhiều thành phần truy cập.

Tích hợp với Suspense

experimental_useCache được thiết kế để hoạt động liền mạch với tính năng Suspense của React. Suspense cho phép bạn xử lý một cách khai báo trạng thái tải của các thành phần đang chờ dữ liệu được tải. Khi bạn sử dụng experimental_useCache kết hợp với Suspense, React sẽ tự động tạm dừng việc render của thành phần cho đến khi dữ liệu có sẵn trong bộ nhớ đệm hoặc đã được tìm nạp từ nguồn dữ liệu. Điều này cho phép bạn cung cấp trải nghiệm người dùng tốt hơn bằng cách hiển thị một giao diện dự phòng (ví dụ: một vòng quay tải) trong khi dữ liệu đang tải.

Trong ví dụ trên, thành phần Suspense bọc thành phần UserProfile và cung cấp một prop fallback. Giao diện dự phòng này sẽ được hiển thị trong khi dữ liệu người dùng đang được tìm nạp. Khi dữ liệu có sẵn, thành phần UserProfile sẽ được render với dữ liệu đã tìm nạp.

React Server Components (RSC) và experimental_useCache

experimental_useCache tỏa sáng khi được sử dụng với React Server Components. Trong RSC, việc tìm nạp dữ liệu diễn ra trên máy chủ, và kết quả được truyền trực tuyến đến máy khách. experimental_useCache có thể tối ưu hóa đáng kể việc tìm nạp dữ liệu phía máy chủ bằng cách đảm bảo rằng dữ liệu chỉ được tìm nạp một lần cho mỗi yêu cầu, ngay cả khi nhiều thành phần cần cùng một dữ liệu.

Hãy xem xét một kịch bản nơi bạn có một thành phần máy chủ cần tìm nạp dữ liệu người dùng và hiển thị nó ở nhiều phần của giao diện người dùng. Nếu không có experimental_useCache, bạn có thể sẽ tìm nạp dữ liệu người dùng nhiều lần, điều này có thể không hiệu quả. Với experimental_useCache, bạn có thể đảm bảo rằng dữ liệu người dùng chỉ được tìm nạp một lần và sau đó được lưu vào bộ nhớ đệm cho các lần sử dụng tiếp theo trong cùng một yêu cầu máy chủ.

Ví dụ (Ví dụ RSC khái niệm):

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

async function fetchUserData(userId) {
  // Mô phỏng việc tìm nạp dữ liệu người dùng từ cơ sở dữ liệu
  await new Promise(resolve => setTimeout(resolve, 500)); // Mô phỏng độ trễ truy vấn cơ sở dữ liệu
  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 (
    

      
Chào mừng, {userData.name}!
      
      
    
  );
}

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

      
Thông tin người dùng
      
Email: {userData.email}
    
  );
}

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

      
Hoạt động gần đây
      
{userData.name} đã xem trang chủ.
    
  );
}

Trong ví dụ đơn giản này, UserDashboard, UserInfo, và UserActivity đều là các Server Components. Tất cả chúng đều cần quyền truy cập vào dữ liệu người dùng. Việc sử dụng experimental_useCache đảm bảo rằng hàm fetchUserData chỉ được gọi một lần cho mỗi yêu cầu máy chủ, mặc dù nó được sử dụng trong nhiều thành phần.

Những lưu ý và nhược điểm tiềm tàng

Mặc dù experimental_useCache mang lại những lợi ích đáng kể, điều quan trọng là phải nhận thức được những hạn chế và nhược điểm tiềm tàng của nó:

• Trạng thái thử nghiệm: Là một API thử nghiệm, experimental_useCache có thể bị thay đổi hoặc xóa bỏ trong các bản phát hành React trong tương lai. Hãy sử dụng nó một cách thận trọng trong môi trường sản phẩm và chuẩn bị để điều chỉnh mã của bạn nếu cần. Theo dõi tài liệu chính thức và ghi chú phát hành của React để cập nhật.
• Vô hiệu hóa cache: experimental_useCache không cung cấp cơ chế tích hợp sẵn để vô hiệu hóa cache. Bạn sẽ cần phải tự thực hiện các chiến lược của riêng mình để vô hiệu hóa cache khi dữ liệu cơ bản thay đổi. Điều này có thể bao gồm việc sử dụng các hook tùy chỉnh hoặc context provider để quản lý vòng đời của cache.
• Sử dụng bộ nhớ: Việc lưu trữ dữ liệu vào bộ nhớ đệm có thể làm tăng việc sử dụng bộ nhớ. Hãy chú ý đến kích thước của dữ liệu bạn đang cache và xem xét sử dụng các kỹ thuật như loại bỏ cache (cache eviction) hoặc hết hạn (expiration) để hạn chế tiêu thụ bộ nhớ. Theo dõi việc sử dụng bộ nhớ trong ứng dụng của bạn, đặc biệt là trong môi trường phía máy chủ.
• Tuần tự hóa đối số (Argument Serialization): Các đối số được truyền cho hàm đã được cache phải có thể tuần tự hóa được. Điều này là do experimental_useCache sử dụng các đối số để tạo ra một khóa cache. Nếu các đối số không thể tuần tự hóa, cache có thể không hoạt động chính xác.
• Gỡ lỗi (Debugging): Gỡ lỗi các vấn đề về caching có thể là một thách thức. Sử dụng các công cụ ghi log và gỡ lỗi để kiểm tra bộ nhớ đệm và xác minh rằng nó đang hoạt động như mong đợi. Cân nhắc thêm log gỡ lỗi tùy chỉnh vào hàm fetchUserData của bạn để theo dõi khi nào dữ liệu đang được tìm nạp và khi nào nó được lấy từ bộ nhớ đệm.
• Trạng thái toàn cục (Global State): Tránh sử dụng trạng thái toàn cục có thể thay đổi bên trong hàm được cache. Điều này có thể dẫn đến hành vi không mong muốn và gây khó khăn cho việc suy luận về bộ nhớ đệm. Hãy dựa vào các đối số của hàm và kết quả đã được cache để duy trì một trạng thái nhất quán.
• Cấu trúc dữ liệu phức tạp: Hãy thận trọng khi cache các cấu trúc dữ liệu phức tạp, đặc biệt nếu chúng chứa các tham chiếu vòng tròn. Tham chiếu vòng tròn có thể dẫn đến các vòng lặp vô hạn hoặc lỗi tràn ngăn xếp (stack overflow) trong quá trình tuần tự hóa.

Các chiến lược vô hiệu hóa cache

Vì experimental_useCache không xử lý việc vô hiệu hóa, đây là một số chiến lược bạn có thể sử dụng:

• Vô hiệu hóa thủ công: Triển khai một hook tùy chỉnh hoặc context provider để theo dõi các thay đổi dữ liệu. Khi có một thay đổi xảy ra, hãy vô hiệu hóa cache bằng cách đặt lại hàm đã được cache. Điều này bao gồm việc lưu trữ một phiên bản hoặc dấu thời gian thay đổi khi có sự thay đổi và kiểm tra điều này trong hàm `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("Đang tìm nạp dữ liệu với phiên bản:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Dữ liệu cho phiên bản ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Gọi cache
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Ví dụ sử dụng:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Vô hiệu hóa Cache
       }
  
       // Bọc App của bạn với DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• Hết hạn dựa trên thời gian: Triển khai một cơ chế hết hạn cache tự động vô hiệu hóa cache sau một khoảng thời gian nhất định. Điều này có thể hữu ích cho dữ liệu tương đối tĩnh nhưng có thể thay đổi đôi khi.
• Vô hiệu hóa dựa trên thẻ (Tag-Based Invalidation): Liên kết các thẻ với dữ liệu đã được cache và vô hiệu hóa cache dựa trên các thẻ này. Điều này có thể hữu ích để vô hiệu hóa dữ liệu liên quan khi một mẩu dữ liệu cụ thể thay đổi.
• WebSockets và cập nhật thời gian thực: Nếu ứng dụng của bạn sử dụng WebSockets hoặc các cơ chế cập nhật thời gian thực khác, bạn có thể sử dụng các cập nhật này để kích hoạt việc vô hiệu hóa cache. Khi nhận được một cập nhật thời gian thực, hãy vô hiệu hóa cache cho dữ liệu bị ảnh hưởng.

Các phương pháp tốt nhất khi sử dụng experimental_useCache

Để sử dụng hiệu quả experimental_useCache và tránh các cạm bẫy tiềm tàng, hãy tuân theo các phương pháp tốt nhất sau:

• Sử dụng cho các hoạt động tốn kém: Chỉ sử dụng experimental_useCache cho các hoạt động thực sự tốn kém, chẳng hạn như tìm nạp dữ liệu hoặc các phép tính phức tạp. Việc cache các hoạt động không tốn kém thực sự có thể làm giảm hiệu năng do chi phí quản lý bộ nhớ đệm.
• Định nghĩa khóa cache rõ ràng: Đảm bảo rằng các đối số được truyền cho hàm đã được cache xác định duy nhất dữ liệu đang được cache. Điều này rất quan trọng để đảm bảo rằng bộ nhớ đệm hoạt động chính xác và dữ liệu không bị tái sử dụng một cách vô ý. Đối với các đối số là đối tượng, hãy xem xét việc tuần tự hóa và băm chúng để tạo ra một khóa nhất quán.
• Triển khai các chiến lược vô hiệu hóa cache: Như đã đề cập trước đó, bạn sẽ cần phải tự thực hiện các chiến lược của riêng mình để vô hiệu hóa cache khi dữ liệu cơ bản thay đổi. Hãy chọn một chiến lược phù hợp với ứng dụng và dữ liệu của bạn.
• Theo dõi hiệu năng cache: Theo dõi hiệu năng của bộ nhớ đệm để đảm bảo rằng nó đang hoạt động như mong đợi. Sử dụng các công cụ ghi log và gỡ lỗi để theo dõi các lần truy cập và bỏ lỡ cache (cache hits and misses) và xác định các điểm nghẽn tiềm tàng.
• Cân nhắc các giải pháp thay thế: Trước khi sử dụng experimental_useCache, hãy cân nhắc xem các giải pháp caching khác có thể phù hợp hơn với nhu cầu của bạn hay không. Ví dụ, nếu bạn cần một giải pháp caching mạnh mẽ hơn với các tính năng tích hợp sẵn như vô hiệu hóa và loại bỏ cache, bạn có thể xem xét sử dụng một thư viện caching chuyên dụng. Các thư viện như `react-query`, `SWR`, hoặc thậm chí sử dụng `localStorage` đôi khi có thể phù hợp hơn.
• Bắt đầu từ quy mô nhỏ: Giới thiệu experimental_useCache một cách từ từ trong ứng dụng của bạn. Bắt đầu bằng cách cache một vài hoạt động tìm nạp dữ liệu quan trọng và dần dần mở rộng việc sử dụng nó khi bạn có thêm kinh nghiệm.
• Ghi lại tài liệu về chiến lược caching của bạn: Ghi lại tài liệu rõ ràng về chiến lược caching của bạn, bao gồm dữ liệu nào đang được cache, cách cache bị vô hiệu hóa, và bất kỳ hạn chế tiềm tàng nào. Điều này sẽ giúp các nhà phát triển khác dễ dàng hiểu và bảo trì mã của bạn hơn.
• Kiểm thử kỹ lưỡng: Kiểm thử kỹ lưỡng việc triển khai caching của bạn để đảm bảo rằng nó hoạt động chính xác và không gây ra bất kỳ lỗi không mong muốn nào. Viết các bài kiểm thử đơn vị để xác minh rằng bộ nhớ đệm đang được điền và vô hiệu hóa như mong đợi.

Các giải pháp thay thế cho experimental_useCache

Mặc dù experimental_useCache cung cấp một cách tiện lợi để quản lý caching trong React, nó không phải là lựa chọn duy nhất. Một số giải pháp caching khác có thể được sử dụng trong các ứng dụng React, mỗi giải pháp đều có những ưu và nhược điểm riêng.

• useMemo: Hook useMemo có thể được sử dụng để ghi nhớ kết quả của các phép tính tốn kém. Mặc dù nó không cung cấp caching thực sự qua các lần render, nó có thể hữu ích để tối ưu hóa hiệu năng trong một thành phần duy nhất. Nó ít phù hợp hơn cho việc tìm nạp dữ liệu hoặc các kịch bản mà dữ liệu cần được chia sẻ giữa các thành phần.
• React.memo: React.memo là một thành phần bậc cao (higher-order component) có thể được sử dụng để ghi nhớ các thành phần chức năng. Nó ngăn chặn việc render lại của thành phần nếu các props của nó không thay đổi. Điều này có thể cải thiện hiệu năng trong một số trường hợp, nhưng nó không cung cấp caching dữ liệu.
• Thư viện caching bên ngoài (react-query, SWR): Các thư viện như react-query và SWR cung cấp các giải pháp tìm nạp dữ liệu và caching toàn diện cho các ứng dụng React. Các thư viện này cung cấp các tính năng như vô hiệu hóa cache tự động, tìm nạp dữ liệu nền và cập nhật lạc quan. Chúng có thể là một lựa chọn tốt nếu bạn cần một giải pháp caching mạnh mẽ hơn với các tính năng nâng cao.
• Local Storage / Session Storage: Đối với các trường hợp sử dụng đơn giản hơn hoặc để duy trì dữ liệu qua các phiên, có thể sử dụng `localStorage` hoặc `sessionStorage`. Tuy nhiên, việc quản lý thủ công việc tuần tự hóa, vô hiệu hóa và giới hạn lưu trữ là cần thiết.
• Giải pháp caching tùy chỉnh: Bạn cũng có thể tự xây dựng các giải pháp caching tùy chỉnh của riêng mình bằng cách sử dụng context API của React hoặc các kỹ thuật quản lý trạng thái khác. Điều này cho phép bạn kiểm soát hoàn toàn việc triển khai caching, nhưng nó cũng đòi hỏi nhiều nỗ lực và chuyên môn hơn.

Kết luận

Hook experimental_useCache của React cung cấp một cách mạnh mẽ và tiện lợi để quản lý caching trong các ứng dụng React. Bằng cách lưu vào bộ nhớ đệm kết quả của các hoạt động tốn kém, bạn có thể cải thiện đáng kể hiệu năng, giảm các yêu cầu mạng và đơn giản hóa logic tìm nạp dữ liệu của mình. Khi được sử dụng kết hợp với Suspense và React Server Components, experimental_useCache có thể nâng cao hơn nữa trải nghiệm người dùng và tối ưu hóa hiệu suất render phía máy chủ.

Tuy nhiên, điều quan trọng là phải nhận thức được những hạn chế và nhược điểm tiềm tàng của experimental_useCache, chẳng hạn như việc thiếu cơ chế vô hiệu hóa cache tích hợp sẵn và khả năng tăng sử dụng bộ nhớ. Bằng cách tuân theo các phương pháp tốt nhất được nêu trong hướng dẫn này và xem xét cẩn thận các nhu cầu cụ thể của ứng dụng, bạn có thể sử dụng hiệu quả experimental_useCache để mở khóa những lợi ích đáng kể về hiệu năng và mang lại trải nghiệm người dùng tốt hơn.

Hãy nhớ luôn cập nhật thông tin về các API thử nghiệm mới nhất của React và chuẩn bị để điều chỉnh mã của bạn khi cần thiết. Khi React tiếp tục phát triển, các kỹ thuật caching như experimental_useCache sẽ đóng một vai trò ngày càng quan trọng trong việc xây dựng các ứng dụng web hiệu năng cao và có khả năng mở rộng.