flushSync

flushSync(callback)

• Ссылка
  • flushSync(callback)
• Использование
  • Синхронизация обновлений для интеграций с сторонними сервисами

Ссылка

flushSync(callback)

Вызов flushSync заставляет React выполнить все ожидающие задачи и обновить DOM синхронно.

import { flushSync } from 'react-dom';

flushSync(() => {
  setSomething(123);
});

В большинстве случаев, можно избежать использования flushSync. Применяйте flushSync только в крайних случаях.

См. дополнительные примеры ниже.

Параметры

• callback: Функция. React немедленно вызовет этот обратный вызов и синхронно выполнит все обновления, которые он содержит. Он также может выполнить любые ожидающие обновления, эффекты или обновления внутри эффектов. Если обновление приостановится в результате вызова flushSync, возможные резервные варианты могут быть снова показаны.

Возвращаемое значение

flushSync возвращает undefined.

Ограничения

• flushSync может существенно ухудшить производительность. Используйте с осторожностью.
• flushSync может заставить ожидающие границы Suspense отобразить их fallback состояние.
• flushSync может выполнить ожидающие эффекты и синхронно применить все содержащиеся в них обновления, прежде чем вернуть значение.
• flushSync может выполнить обновления вне обратного вызова, когда это необходимо, чтобы выполнить обновления внутри обратного вызова. Например, если есть ожидающие обновления от нажатия, React может выполнить эти обновления, прежде чем выполнить обновления внутри обратного вызова.

Использование

Синхронизация обновлений для интеграций с сторонними сервисами

При интеграции с сторонним кодом, таким как API браузера или библиотеки пользовательского интерфейса, может потребоваться принудительная синхронизация обновлений React. Используйте flushSync для принудительного выполнения синхронного обновления состояния React внутри обратного вызова:

flushSync(() => {
  setSomething(123);
});
// By this line, the DOM is updated.

Это гарантирует, что к моменту выполнения следующей строки кода React уже обновил DOM.

Использование flushSync — редкая практика, а частое его использование может значительно ухудшить производительность вашего приложения. Если ваше приложение использует только API React и не интегрируется с сторонними библиотеками, flushSync должно быть необязательным.

Однако это может быть полезно для интеграции с сторонним кодом, таким как API браузера.

Некоторые API браузера ожидают, что результаты внутри обратных вызовов будут записаны в DOM синхронно, к концу обратного вызова, чтобы браузер мог что-то сделать с отрисованным DOM. В большинстве случаев React обрабатывает это автоматически. Но в некоторых случаях может потребоваться принудительная синхронная операция обновления.

Например, API браузера onbeforeprint позволяет изменить страницу непосредственно перед открытием диалогового окна печати. Это полезно для применения пользовательских стилей печати, которые позволяют документу отображаться лучше при печати. В примере ниже вы используете flushSync внутри обратного вызова onbeforeprint для немедленного «выполнения» состояния React в DOM. Затем, к моменту открытия диалогового окна печати, isPrinting отображает «да»:

import { useState, useEffect } from 'react';
import { flushSync } from 'react-dom';

export default function PrintApp() {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    function handleBeforePrint() {
      flushSync(() => {
        setIsPrinting(true);
      })
    }

    function handleAfterPrint() {
      setIsPrinting(false);
    }

    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);
    return () => {
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    }
  }, []);

  return (
    <>
      <h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
      <button onClick={() => window.print()}>
        Print
      </button>
    </>
  );
}

Без flushSync, диалоговое окно печати отобразит isPrinting как «нет». Это связано с тем, что React асинхронно группирует обновления, а диалоговое окно печати отображается до обновления состояния.