cacheSignal

cacheSignal позволяет узнать, когда время жизни cache() закончилось.

const signal = cacheSignal();

Сейчас cacheSignal используется только с серверными компонентами React.

Описание

cacheSignal

Вызовите cacheSignal, чтобы получить AbortSignal.

import {cacheSignal} from 'react';
async function Component() {
  await fetch(url, { signal: cacheSignal() });
}

Когда React закончит рендеринг, AbortSignal будет прерван. Это позволяет отменить любую незавершённую работу, которая больше не нужна. Рендеринг считается законченным, когда: - React успешно завершил рендеринг - рендеринг был прерван - рендеринг завершился ошибкой

Параметры

Эта функция не принимает никаких параметров.

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

cacheSignal возвращает AbortSignal, если вызван во время рендеринга. В противном случае cacheSignal() возвращает null.

Предупреждения

• Сейчас cacheSignal предназначен для использования только в серверных компонентах React. В клиентских компонентах он всегда возвращает null. В будущем он также будет использоваться для клиентских компонентов, когда клиентский кэш обновляется или инвалидируется. Не следует предполагать, что на клиенте он всегда будет null.
• Если вызвать cacheSignal вне рендеринга, он вернёт null, чтобы было ясно, что текущая область видимости не кэшируется навсегда.

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

Отмена незавершённых запросов

Вызовите cacheSignal, чтобы прервать незавершённые запросы.

import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);
async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

Подводный камень

Вы не можете использовать cacheSignal, чтобы прервать асинхронную работу, начатую вне рендеринга, например

import {cacheSignal} from 'react';
// 🚩 Pitfall: The request will not actually be aborted if the rendering of `Component` is finished.
const response = fetch(url, { signal: cacheSignal() });
async function Component() {
  await response;
}

Игнорирование ошибок после того, как React закончил рендеринг

Если функция выбрасывает исключение, это может быть из-за отмены (например, соединение с базой данных было закрыто). Вы можете использовать свойство aborted, чтобы проверить, была ли ошибка из-за отмены или это настоящая ошибка. Ошибки из-за отмены можно игнорировать.

import {cacheSignal} from "react";
import {queryDatabase, logError} from "./database";

async function getData(id) {
  try {
     return await queryDatabase(id);
  } catch (x) {
     if (!cacheSignal()?.aborted) {
        // only log if it's a real error and not due to cancellation
       logError(x);
     }
     return null;
  }
}

async function Component({id}) {
  const data = await getData(id);
  if (data === null) {
    return <div>No data available</div>;
  }
  return <div>{data.name}</div>;
}

Источник — https://react.dev/reference/react/cacheSignal

Комментарии