useSyncExternalStore

Підключення до API браузера

Ще одна причина додати useSyncExternalStore - це коли ви хочете підписатися на деяке значення, що відображається браузером і змінюється з часом. Наприклад, припустимо, ви хочете, щоб ваш компонент показував, чи активне мережеве з'єднання. Браузер показує цю інформацію за допомогою властивості з назвою navigator.onLine.

Це значення може змінюватися без відома React, тому вам слід читати його за допомогою useSyncExternalStore.

import { useSyncExternalStore } from 'react';

function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  // ...
}

Для реалізації функції getSnapshot зчитайте поточне значення з API браузера:

function getSnapshot() {
  return navigator.onLine;
}

Далі потрібно реалізувати функцію subscribe. Наприклад, коли змінюється navigator.onLine, браузер запускає події online та offline на об'єкті window. Вам потрібно підписати аргумент callback на відповідні події, а потім повернути функцію, яка очистить підписки:

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

Тепер React знає, як читати значення із зовнішнього navigator.onLine API та як підписатися на його зміни. Від'єднайте ваш пристрій від мережі і помітьте, що компонент рендериться повторно у відповідь:

Винесення логіки у користувацький хук

Зазвичай ви не будете писати useSyncExternalStore безпосередньо у ваших компонентах. Замість цього ви зазвичай викликаєте його з власного хука. Це дозволить вам використовувати те саме зовнішнє сховище у різних компонентах.

Наприклад, цей користувацький useOnlineStatus хук відстежує, чи мережа є онлайн:

import { useSyncExternalStore } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  return isOnline;
}

function getSnapshot() {
  // ...
}

function subscribe(callback) {
  // ...
}

Тепер різні компоненти можуть викликати useOnlineStatus без повторення базової реалізації:

Додано підтримку серверного рендерингу

Якщо ваш React-застосунок використовує серверний рендеринг, ваші React-компоненти також будуть працювати поза середовищем браузера для генерації початкового HTML. Це створює кілька проблем при підключенні до зовнішнього магазину:

• Якщо ви підключаєтесь до API, доступного лише у браузері, вона не працюватиме, оскільки не існує на сервері.
• Якщо ви підключаєтеся до стороннього сховища даних, вам знадобляться його дані для узгодження між сервером і клієнтом.

Щоб вирішити ці проблеми, передайте функцію getServerSnapshot як третій аргумент до useSyncExternalStore:

import { useSyncExternalStore } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  return isOnline;
}

function getSnapshot() {
  return navigator.onLine;
}

function getServerSnapshot() {
  return true; // Always show "Online" for server-generated HTML
}

function subscribe(callback) {
  // ...
}

Функція getServerSnapshot схожа на getSnapshot, але працює лише у двох випадках:

• Виконується на сервері під час генерування HTML.
• Він виконується на клієнті під час гідратації, тобто коли React бере серверний HTML і робить його інтерактивним.

Таким чином ви можете вказати початкове значення знімка, яке буде використано до того, як програма стане інтерактивною. Якщо немає значущого початкового значення для серверного рендерингу, опустіть цей аргумент, щоб примусово виконати рендеринг на стороні клієнта.

Налагодження

Я отримую помилку: "Результат getSnapshot повинен бути кешований"

Ця помилка означає, що ваша функція getSnapshot повертає новий об'єкт при кожному її виклику, наприклад:

function getSnapshot() {
  // 🔴 Do not return always different objects from getSnapshot
  return {
    todos: myStore.todos
  };
}

React повторно відрендерить компонент, якщо значення повернення getSnapshot відрізняється від попереднього разу. Ось чому, якщо ви завжди повертаєте інше значення, ви потрапите у нескінченний цикл і отримаєте цю помилку.

Ваш об'єкт getSnapshot повинен повертати інший об'єкт, тільки якщо щось дійсно змінилося. Якщо ваше сховище містить незмінні дані, ви можете повертати ці дані безпосередньо:

function getSnapshot() {
  // ✅ You can return immutable data
  return myStore.todos;
}

Якщо дані вашого сховища є змінними, ваша функція getSnapshot повинна повертати незмінний знімок. Це означає, що їй необхідно створювати нові об'єкти, але вона не повинна робити це при кожному виклику. Замість цього він повинен зберігати останній обчислений знімок і повертати той самий знімок, що і минулого разу, якщо дані у сховищі не змінилися. Те, як ви визначатимете, чи змінилися змінювані дані, залежить від вашого змінюваного сховища.

Моя функція subscribe викликається після кожного повторного рендерингу

Цю функцію підписки визначено всередині компонента, тому вона відрізняється у кожному рендерингу:

function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  
  // 🚩 Always a different function, so React will resubscribe on every re-render
  function subscribe() {
    // ...
  }

  // ...
}

React повторно підпишеться на ваш магазин, якщо ви передасте іншу функцію subscribe між повторними рендерингами. Якщо це спричиняє проблеми з продуктивністю і ви хочете уникнути повторної підписки, перемістіть функцію subscribe назовні:

function ChatIndicator() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  // ...
}

// ✅ Always the same function, so React won't need to resubscribe
function subscribe() {
  // ...
}

Альтернативно, обгорніть subscribe у useCallback, щоб повторно підписуватись лише при зміні якогось аргументу:

function ChatIndicator({ userId }) {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  
  // ✅ Same function as long as userId doesn't change
  const subscribe = useCallback(() => {
    // ...
  }, [userId]);

  // ...
}