flushSync

flushSync(callback)

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

Ссылка

flushSync(callback)

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

import { flushSync } from 'react-dom';

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

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

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

Параметры

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

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

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

Ограничения

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

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

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

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

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 асинхронно обрабатывает обновления, а диалог печати отображается до обновления состояния.