flushSync

Використання flushSync є рідкісним і може зашкодити продуктивності вашого застосунку.

flushSync дозволяє змусити React синхронно змивати будь-які оновлення всередині наданого колбеку. Це гарантує, що DOM буде оновлено негайно.

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 показувати їхній відступний стан.
flushSync може запускати відкладені ефекти та синхронно застосовувати будь-які оновлення, які вони містять, перед поверненням.
flushSync може виводити оновлення за межі зворотного виклику, якщо це необхідно для виведення оновлень всередині зворотного виклику. Наприклад, якщо є відкладені оновлення після кліку, React може змити їх перед тим, як змити оновлення всередині зворотного виклику.

Використання

Змивання оновлень для сторонніх інтеграцій

При інтеграції зі стороннім кодом, таким як API браузера або бібліотеки інтерфейсу користувача, може знадобитися змусити React очищати оновлення. Використовуйте flushSync, щоб примусити React відмивати будь-які оновлення стану </CodeStep> всередині зворотного виклику синхронно:</p> <pre><code data-meta="[[1, 2, "setSomething(123)"]]" class="language-js">flushSync(() => { setSomething(123); }); // За цим рядком відбувається оновлення DOM.

Це гарантує, що до моменту запуску наступного рядка коду React вже оновить DOM.

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

Втім, він може бути корисним для інтеграції зі стороннім кодом, наприклад, API браузерів.

Деякі браузерні API очікують, що результати всередині зворотного виклику будуть записані в DOM синхронно, до кінця виклику, щоб браузер міг щось зробити з відрендереним DOM. У більшості випадків React робить це автоматично. Але в деяких випадках може знадобитися примусове синхронне оновлення.

Наприклад, API браузера onbeforeprint дозволяє змінювати сторінку безпосередньо перед відкриттям діалогу друку. Це корисно для застосування користувацьких стилів друку, які дозволяють краще відобразити документ для друку. У прикладі нижче ви використовуєте flushSync всередині зворотного виклику onbeforeprint, щоб негайно "змити" стан React в DOM. Тоді, коли відкриється діалогове вікно друку, isPrinting відобразить "yes":

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 пакує оновлення асинхронно і діалог друку відображається до того, як стан буде оновлено.

flushSync може суттєво погіршити продуктивність, а також несподівано змусити відкладені межі очікування показати їхній резервний стан.

Здебільшого flushSync можна уникнути, тому використовуйте flushSync у крайньому випадку.

[email protected]