ドキュメント
アプリを開く

Surface lifecycle

useAppContext().lifecycle は一つの surface mount の resource を所有し、unmount または exact runtime identity 変更時に cleanup します。

API用途
signalUnmount 時に abort される AbortSignal。
onDispose(dispose)App cleanup を登録し unregister function を返します。
listen(target, type, listener, options?)Mount-owned event listener を追加し disposer を返します。
TSX
import { useEffect, useState } from 'react';
import { useAppContext } from '@sota/platform';

export function OnlineState() {
  const { lifecycle } = useAppContext();
  const [online, setOnline] = useState(navigator.onLine);
  useEffect(() => {
    const update = () => setOnline(navigator.onLine);
    const stopOnline = lifecycle.listen(window, 'online', update);
    const stopOffline = lifecycle.listen(window, 'offline', update);
    return () => {
      stopOnline();
      stopOffline();
    };
  }, [lifecycle]);
  return <p>{online ? 'Online' : 'Offline'}</p>;
}
TypeScript
import { useEffect } from 'react';
import { useAppContext } from '@sota/platform';

export function MountTimer() {
  const { lifecycle } = useAppContext();
  useEffect(() => {
    const timer = window.setInterval(() => console.log('tick'), 30_000);
    const unregister = lifecycle.onDispose(() => window.clearInterval(timer));
    return () => {
      window.clearInterval(timer);
      unregister();
    };
  }, [lifecycle]);
  return null;
}

Process-global listener や timer の代わりにこれらの primitive を使います。React cleanup が disposer を先に呼んでも、surface 消失時には Core が cleanup を保証します。

目次

Esc

全章のタイトルと本文を検索します。