React useSyncExternalStore: Làm chủ việc Đồng bộ hóa Trạng thái Bên ngoài

useSyncExternalStore là một hook của React được giới thiệu trong React 18, cho phép bạn đăng ký và đọc dữ liệu từ các nguồn dữ liệu bên ngoài theo cách tương thích với cơ chế render đồng thời (concurrent rendering). Hook này bắc cầu khoảng cách giữa trạng thái do React quản lý và trạng thái bên ngoài, chẳng hạn như dữ liệu từ thư viện của bên thứ ba, API trình duyệt hoặc các UI framework khác. Hãy cùng tìm hiểu sâu về mục đích, cách triển khai và lợi ích của nó.

Hiểu về Sự cần thiết của useSyncExternalStore

Cơ chế quản lý trạng thái tích hợp sẵn của React (useState, useReducer, Context API) hoạt động cực kỳ hiệu quả đối với dữ liệu được liên kết chặt chẽ với cây thành phần React. Tuy nhiên, nhiều ứng dụng cần tích hợp với các nguồn dữ liệu *nằm ngoài* tầm kiểm soát của React. Các nguồn bên ngoài này có thể bao gồm:

• Thư viện quản lý trạng thái của bên thứ ba: Tích hợp với các thư viện như Zustand, Jotai, hoặc Valtio.
• API trình duyệt: Truy cập dữ liệu từ localStorage, IndexedDB, hoặc Network Information API.
• Dữ liệu được lấy từ máy chủ: Mặc dù các thư viện như React Query và SWR thường được ưu tiên, đôi khi bạn có thể muốn kiểm soát trực tiếp.
• Các UI framework khác: Trong các ứng dụng lai nơi React cùng tồn tại với các công nghệ UI khác.

Việc đọc và ghi trực tiếp vào các nguồn bên ngoài này trong một thành phần React có thể dẫn đến các vấn đề, đặc biệt là với cơ chế render đồng thời. React có thể render một thành phần với dữ liệu cũ nếu nguồn bên ngoài thay đổi trong khi React đang chuẩn bị một màn hình mới. useSyncExternalStore giải quyết vấn đề này bằng cách cung cấp một cơ chế để React đồng bộ hóa an toàn với trạng thái bên ngoài.

Cách useSyncExternalStore Hoạt động

Hook useSyncExternalStore chấp nhận ba đối số:

1. subscribe: Một hàm chấp nhận một callback. Callback này sẽ được gọi mỗi khi store bên ngoài thay đổi. Hàm này nên trả về một hàm khác, mà khi được gọi, sẽ hủy đăng ký (unsubscribe) khỏi store bên ngoài.
2. getSnapshot: Một hàm trả về giá trị hiện tại của store bên ngoài. React sử dụng hàm này để đọc giá trị của store trong quá trình render.
3. getServerSnapshot (tùy chọn): Một hàm trả về giá trị ban đầu của store bên ngoài trên máy chủ. Điều này chỉ cần thiết cho việc render phía máy chủ (SSR). Nếu không được cung cấp, React sẽ sử dụng getSnapshot trên máy chủ.

Hook trả về giá trị hiện tại của store bên ngoài, được lấy từ hàm getSnapshot. React đảm bảo rằng thành phần sẽ render lại mỗi khi giá trị trả về bởi getSnapshot thay đổi, được xác định bằng cách so sánh Object.is.

Ví dụ Cơ bản: Đồng bộ hóa với localStorage

Hãy tạo một ví dụ đơn giản sử dụng useSyncExternalStore để đồng bộ hóa một giá trị với localStorage.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

Trong ví dụ này:

• subscribe: Lắng nghe sự kiện storage trên đối tượng window. Sự kiện này được kích hoạt mỗi khi localStorage được sửa đổi bởi một tab hoặc cửa sổ khác.
• getSnapshot: Lấy giá trị của myValue từ localStorage.
• getServerSnapshot: Trả về một giá trị mặc định cho việc render phía máy chủ. Giá trị này có thể được lấy từ cookie nếu người dùng đã đặt giá trị trước đó.
• MyComponent: Sử dụng useSyncExternalStore để đăng ký các thay đổi trong localStorage và hiển thị giá trị hiện tại.

Các Trường hợp Sử dụng Nâng cao và Những điều cần Lưu ý

1. Tích hợp với các Thư viện Quản lý Trạng thái của Bên thứ ba

useSyncExternalStore tỏa sáng khi tích hợp các thành phần React với các thư viện quản lý trạng thái bên ngoài. Hãy xem một ví dụ sử dụng Zustand:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

Trong ví dụ này, useSyncExternalStore được sử dụng để đăng ký các thay đổi trong store của Zustand. Lưu ý cách chúng ta truyền trực tiếp useStore.subscribe và useStore.getState vào hook, giúp việc tích hợp trở nên liền mạch.

2. Tối ưu hóa Hiệu năng với Memoization

Vì getSnapshot được gọi trong mỗi lần render, điều quan trọng là phải đảm bảo nó hoạt động hiệu quả. Tránh các tính toán tốn kém bên trong getSnapshot. Nếu cần, hãy ghi nhớ (memoize) kết quả của getSnapshot bằng cách sử dụng useMemo hoặc các kỹ thuật tương tự.

Hãy xem xét ví dụ (có thể gây ra vấn đề) này:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Trong ví dụ này, getSnapshot (hàm nội tuyến được truyền làm đối số thứ hai cho useSyncExternalStore) thực hiện một phép toán map tốn kém trên một mảng lớn. Phép toán này sẽ được thực thi trong *mỗi* lần render, ngay cả khi dữ liệu cơ bản không thay đổi. Để tối ưu hóa điều này, chúng ta có thể ghi nhớ kết quả:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Bây giờ, phép toán map chỉ được thực hiện khi externalStore.getState() thay đổi. Lưu ý: bạn sẽ thực sự cần so sánh sâu (deep compare) externalStore.getState() hoặc sử dụng một chiến lược khác nếu store thay đổi cùng một đối tượng. Ví dụ này được đơn giản hóa để minh họa.

3. Xử lý Render Đồng thời

Lợi ích chính của useSyncExternalStore là khả năng tương thích với các tính năng render đồng thời của React. Render đồng thời cho phép React chuẩn bị nhiều phiên bản của UI cùng một lúc. Khi store bên ngoài thay đổi trong quá trình render đồng thời, useSyncExternalStore đảm bảo rằng React luôn sử dụng dữ liệu cập nhật nhất khi áp dụng các thay đổi vào DOM.

Nếu không có useSyncExternalStore, các thành phần có thể render với dữ liệu cũ, dẫn đến sự không nhất quán về mặt hình ảnh và hành vi không mong muốn. Phương thức getSnapshot của useSyncExternalStore được thiết kế để hoạt động đồng bộ và nhanh chóng, cho phép React xác định nhanh chóng liệu store bên ngoài có thay đổi trong quá trình render hay không.

4. Những lưu ý về Render phía Máy chủ (SSR)

Khi sử dụng useSyncExternalStore với render phía máy chủ, điều cần thiết là phải cung cấp hàm getServerSnapshot. Hàm này được sử dụng để lấy giá trị ban đầu của store bên ngoài trên máy chủ. Nếu không có nó, React sẽ cố gắng sử dụng getSnapshot trên máy chủ, điều này có thể không thực hiện được nếu store bên ngoài phụ thuộc vào các API dành riêng cho trình duyệt (ví dụ: localStorage).

Hàm getServerSnapshot nên trả về một giá trị mặc định hoặc lấy dữ liệu từ một nguồn phía máy chủ (ví dụ: cookie, cơ sở dữ liệu). Điều này đảm bảo rằng HTML ban đầu được render trên máy chủ chứa dữ liệu chính xác.

5. Xử lý Lỗi

Xử lý lỗi một cách mạnh mẽ là rất quan trọng, đặc biệt khi làm việc với các nguồn dữ liệu bên ngoài. Hãy bọc các hàm getSnapshot và getServerSnapshot trong các khối try...catch để xử lý các lỗi tiềm ẩn. Ghi lại các lỗi một cách thích hợp và cung cấp các giá trị dự phòng để ngăn ứng dụng bị sập.

6. Hook Tùy chỉnh để Tái sử dụng

Để thúc đẩy việc tái sử dụng mã, hãy đóng gói logic của useSyncExternalStore trong một hook tùy chỉnh. Điều này giúp chia sẻ logic giữa nhiều thành phần dễ dàng hơn.

Ví dụ, hãy tạo một hook tùy chỉnh để truy cập một khóa cụ thể trong localStorage:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

Bây giờ, bạn có thể dễ dàng sử dụng hook này trong bất kỳ thành phần nào:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

Các Thực hành Tốt nhất

• Giữ cho getSnapshot nhanh: Tránh các tính toán tốn kém trong hàm getSnapshot. Ghi nhớ kết quả nếu cần thiết.
• Cung cấp getServerSnapshot cho SSR: Đảm bảo HTML ban đầu được render trên máy chủ chứa dữ liệu chính xác.
• Sử dụng Hook Tùy chỉnh: Đóng gói logic useSyncExternalStore trong các hook tùy chỉnh để có khả năng tái sử dụng và bảo trì tốt hơn.
• Xử lý Lỗi một cách Mềm dẻo: Bọc getSnapshot và getServerSnapshot trong các khối try...catch.
• Giảm thiểu việc Đăng ký: Chỉ đăng ký những phần của store bên ngoài mà thành phần thực sự cần. Điều này làm giảm các lần render lại không cần thiết.
• Cân nhắc các Giải pháp thay thế: Đánh giá xem useSyncExternalStore có thực sự cần thiết hay không. Đối với các trường hợp đơn giản, các kỹ thuật quản lý trạng thái khác có thể phù hợp hơn.

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

Mặc dù useSyncExternalStore là một công cụ mạnh mẽ, nó không phải lúc nào cũng là giải pháp tốt nhất. Hãy xem xét các lựa chọn thay thế sau:

• Quản lý Trạng thái Tích hợp sẵn (useState, useReducer, Context API): Nếu dữ liệu được liên kết chặt chẽ với cây thành phần React, các tùy chọn tích hợp sẵn này thường là đủ.
• React Query/SWR: Đối với việc tìm nạp dữ liệu, các thư viện này cung cấp khả năng lưu trữ cache, vô hiệu hóa và xử lý lỗi tuyệt vời.
• Zustand/Jotai/Valtio: Các thư viện quản lý trạng thái tối giản này cung cấp một cách đơn giản và hiệu quả để quản lý trạng thái ứng dụng.
• Redux/MobX: Đối với các ứng dụng phức tạp có trạng thái toàn cục, Redux hoặc MobX có thể là một lựa chọn tốt hơn (mặc dù chúng giới thiệu nhiều mã soạn sẵn hơn).

Sự lựa chọn phụ thuộc vào các yêu cầu cụ thể của ứng dụng của bạn.

Kết luận

useSyncExternalStore là một sự bổ sung quý giá cho bộ công cụ của React, cho phép tích hợp liền mạch với các nguồn trạng thái bên ngoài trong khi vẫn duy trì khả năng tương thích với render đồng thời. Bằng cách hiểu mục đích, cách triển khai và các trường hợp sử dụng nâng cao của nó, bạn có thể tận dụng hook này để xây dựng các ứng dụng React mạnh mẽ và hiệu suất cao, tương tác hiệu quả với dữ liệu từ nhiều nguồn khác nhau.

Hãy nhớ ưu tiên hiệu suất, xử lý lỗi một cách mềm dẻo và cân nhắc các giải pháp thay thế trước khi sử dụng useSyncExternalStore. Với việc lập kế hoạch và triển khai cẩn thận, hook này có thể tăng cường đáng kể tính linh hoạt và sức mạnh cho các ứng dụng React của bạn.

Tìm hiểu thêm

• Tài liệu React về useSyncExternalStore
• Ví dụ với các thư viện quản lý trạng thái khác nhau (Zustand, Jotai, Valtio)
• Các bài kiểm tra hiệu năng so sánh useSyncExternalStore với các phương pháp khác