@fringeworks/react-utils 0.9.2 → 0.10.0

package/README.ja.md

@@ -31,15 +31,20 @@ import useLatestRef from '@fringeworks/react-utils/hooks/useLatestRef';
 
 ### hook
 
-| hook                                | 説明                                                                   |
-| ----------------------------------- | ---------------------------------------------------------------------- |
-| `useCombinedRefs(...refs)`          | 複数の ref にまとめて値を渡す callback ref を返す                      |
-| `useConstant(factory)`              | 初回のレンダリングで作った値を、アンマウントされるまで返し続ける       |
-| `useExecutionAt(options?)`          | Execution Request プロパティに渡す値と、実行のきっかけになる関数を返す |
-| `useIsMounted()`                    | マウントされているかどうかを判定する関数を返す                         |
-| `useLatestRef(value)`               | 最新の値を保持する参照を返す                                           |
-| `usePreviousValue(value, options?)` | 前回の値を返す                                                         |
-| `useStableLength(arr)`              | 配列の要素数がレンダリングをまたいで変わらないことを確認する           |
+| hook                                          | 説明                                                                   |
+| --------------------------------------------- | ---------------------------------------------------------------------- |
+| `useCombinedRefs(...refs)`                    | 複数の ref にまとめて値を渡す callback ref を返す                      |
+| `useConstant(factory)`                        | 初回のレンダリングで作った値を、アンマウントされるまで返し続ける       |
+| `useExecutionAt(options?)`                    | Execution Request プロパティに渡す値と、実行のきっかけになる関数を返す |
+| `useExecutionEffect(request, callback)`       | Execution Request プロパティで要求されたときに、処理を実行する         |
+| `useExecutionLayoutEffect(request, callback)` | `useExecutionEffect` の、画面に表示する前に実行する版                  |
+| `useIsHydrated()`                             | ハイドレーションが終わっているかを返す                                 |
+| `useIsMounted()`                              | マウントされているかどうかを判定する関数を返す                         |
+| `useLatestRef(value)`                         | 最新の値を保持する参照を返す                                           |
+| `usePreviousValue(value, options?)`           | 前回の値を返す                                                         |
+| `useRerender()`                               | 再レンダリングだけを起こす関数を返す                                   |
+| `useStableCallback(callback)`                 | 参照が変わらず、最新のコールバックを呼ぶ関数を返す                     |
+| `useStableLength(arr)`                        | 配列の要素数がレンダリングをまたいで変わらないことを確認する           |
 
 ### 関数
 
@@ -96,7 +101,7 @@ useExecutionAt<P = void>(
 
 命令的な API を持つ部品をラップしたコンポーネントで、プロパティを通じてそのメソッドを実行するための hook です。Execution Request プロパティ（`undoAt` のように `At` で終わるプロパティ）に渡す値と、実行のきっかけになる関数を返します。
 
-- `request.at` は初期状態では `0` で、`execute` を呼ぶたびに増加します。受け取る側は `at` が変わったら処理を実行します。
+- `request.at` は初期状態では `0` で、`execute` を呼ぶたびに増加します。受け取る側は `useExecutionEffect` / `useExecutionLayoutEffect` で処理を実行します。
 - `execute` の参照は常に同じです。
 
 ```tsx
@@ -110,6 +115,69 @@ const [undoAt, undo] = useExecutionAt<string>();
 | ----------------- | --- | --------------------------------- |
 | `initialPayload?` | `P` | 初期状態の `request.payload` の値 |
 
+### `useExecutionEffect`
+
+```ts
+useExecutionEffect<P = void>(
+  request: ExecutionRequest<P> | undefined,
+  callback: (payload: P | undefined) => void,
+): void
+```
+
+`useExecutionAt` と対になる、受け取る側の hook です。Execution Request プロパティで要求されたときに、要求の `payload` を渡して `callback` を実行します。処理は画面に表示した後（`useEffect`）に実行します。
+
+- `request.at` が変わったときだけ実行します。`payload` は比べません。
+- マウントより前に出た要求は実行しません。マウントしたときにすでに渡されていた要求も実行しません。
+- 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行します。
+- `callback` は最新のものを呼びます。`callback` の参照が変わっても実行しません。
+- `request` が `undefined` の場合は、要求なしとして扱います。省略できるプロパティをそのまま渡せます。
+
+```tsx
+type Props = { undoAt?: ExecutionRequest<string> };
+
+function WrappedImperativeComponent({ undoAt }: Props) {
+  const instance = useConstant(() => createImperativeComponent());
+  useExecutionEffect(undoAt, (payload) => {
+    instance.undo(payload);
+  });
+  // ...
+}
+```
+
+| 引数       | 型                                  | 説明                                        |
+| ---------- | ----------------------------------- | ------------------------------------------- |
+| `request`  | `ExecutionRequest<P> \| undefined`  | 受け取った Execution Request プロパティの値 |
+| `callback` | `(payload: P \| undefined) => void` | 要求されたときに実行する処理                |
+
+### `useExecutionLayoutEffect`
+
+```ts
+useExecutionLayoutEffect<P = void>(
+  request: ExecutionRequest<P> | undefined,
+  callback: (payload: P | undefined) => void,
+): void
+```
+
+`useExecutionEffect` の、処理を画面に表示する前（`useLayoutEffect`）に実行する版です。スクロールの位置を合わせる、計測し直すなど、結果を画面に表示する前に反映したい処理に使います。要求の扱いと引数は `useExecutionEffect` と同じです。
+
+### `useIsHydrated`
+
+```ts
+useIsHydrated(): boolean
+```
+
+ハイドレーションが終わっているかを返します。クライアントにしか無い値（`window`・`localStorage`・画面の幅など）を、ハイドレーションの不一致を起こさずに描画するために使います。
+
+- サーバーの描画とハイドレーション中は `false`、その後は `true` を返します。
+- ハイドレーションの後にマウントしたコンポーネントや、クライアントだけで描画した場合は、最初から `true` を返します。
+- `typeof window` による判定と違い、クライアントでもハイドレーション中は `false` になります。そのため、サーバーの HTML と食い違いません。
+
+```tsx
+const isHydrated = useIsHydrated();
+
+<p>{isHydrated ? navigator.userAgent : ''}</p>;
+```
+
 ### `useIsMounted`
 
 ```ts
@@ -151,6 +219,38 @@ usePreviousValue<T = unknown>(
 | `initialValue?` | `T`                                     | 値が一度も変わっていない間に返す値                                     |
 | `isEqual?`      | `(oldValue: T, newValue: T) => boolean` | 同じ値とみなす場合に `true` を返す比較関数。未指定の場合は `Object.is` |
 
+### `useRerender`
+
+```ts
+useRerender(): () => void
+```
+
+再レンダリングだけを起こす関数を返します。値を持たずに描画し直したい場合（外部の状態を読み直して表示するときなど）に使います。
+
+- 返す関数の参照は常に同じです。
+
+### `useStableCallback`
+
+```ts
+useStableCallback<A extends unknown[], R>(
+  callback: (...args: A) => R,
+): (...args: A) => R
+```
+
+参照が変わらず、呼ぶと最新の `callback` を実行する関数を返します。子のコンポーネントに渡すイベントハンドラーの参照を変えずに、中身は常に最新にする場合に使います。
+
+- 返す関数の参照は常に同じです。
+- 最新の `callback` はコミット時に反映されます。レンダリング中には呼ばないでください（古い `callback` が呼ばれます）。イベントハンドラーやエフェクトの中から呼びます。
+- React 19.2 の `useEffectEvent` はエフェクトの中から呼ぶ専用ですが、この hook が返す関数は子のコンポーネントにも渡せます。
+
+```tsx
+const handleSelect = useStableCallback((id: string) => {
+  onSelect(id, filter);
+});
+
+<MemoizedList onSelect={handleSelect} />;
+```
+
 ### `useStableLength`
 
 ```ts

package/README.md

@@ -31,15 +31,20 @@ import useLatestRef from '@fringeworks/react-utils/hooks/useLatestRef';
 
 ### Hooks
 
-| Hook                                | Description                                                                   |
-| ----------------------------------- | ----------------------------------------------------------------------------- |
-| `useCombinedRefs(...refs)`          | Returns a callback ref that passes the value to all the given refs            |
-| `useConstant(factory)`              | Keeps returning the value created on the first render until unmount           |
-| `useExecutionAt(options?)`          | Returns a value for an Execution Request prop and a function that triggers it |
-| `useIsMounted()`                    | Returns a function that tells whether the component is mounted                |
-| `useLatestRef(value)`               | Returns a ref that holds the latest value                                     |
-| `usePreviousValue(value, options?)` | Returns the previous value                                                    |
-| `useStableLength(arr)`              | Ensures that the length of an array does not change across renders            |
+| Hook                                          | Description                                                                   |
+| --------------------------------------------- | ----------------------------------------------------------------------------- |
+| `useCombinedRefs(...refs)`                    | Returns a callback ref that passes the value to all the given refs            |
+| `useConstant(factory)`                        | Keeps returning the value created on the first render until unmount           |
+| `useExecutionAt(options?)`                    | Returns a value for an Execution Request prop and a function that triggers it |
+| `useExecutionEffect(request, callback)`       | Runs an operation when it is requested through an Execution Request prop      |
+| `useExecutionLayoutEffect(request, callback)` | A version of `useExecutionEffect` that runs before the browser paints         |
+| `useIsHydrated()`                             | Returns whether hydration has finished                                        |
+| `useIsMounted()`                              | Returns a function that tells whether the component is mounted                |
+| `useLatestRef(value)`                         | Returns a ref that holds the latest value                                     |
+| `usePreviousValue(value, options?)`           | Returns the previous value                                                    |
+| `useRerender()`                               | Returns a function that only triggers a re-render                             |
+| `useStableCallback(callback)`                 | Returns a function with a stable reference that calls the latest callback     |
+| `useStableLength(arr)`                        | Ensures that the length of an array does not change across renders            |
 
 ### Functions
 
@@ -96,7 +101,7 @@ useExecutionAt<P = void>(
 
 A hook for components that wrap a part with an imperative API, letting you call its methods through props. It returns a value to pass to an Execution Request prop (a prop ending with `At`, such as `undoAt`) and a function that triggers it.
 
-- `request.at` is `0` initially and increases every time `execute` is called. The receiving side runs the operation when `at` changes.
+- `request.at` is `0` initially and increases every time `execute` is called. The receiving side runs the operation with `useExecutionEffect` / `useExecutionLayoutEffect`.
 - `execute` always keeps the same reference.
 
 ```tsx
@@ -110,6 +115,69 @@ const [undoAt, undo] = useExecutionAt<string>();
 | ----------------- | ---- | -------------------------------------- |
 | `initialPayload?` | `P`  | The initial value of `request.payload` |
 
+### `useExecutionEffect`
+
+```ts
+useExecutionEffect<P = void>(
+  request: ExecutionRequest<P> | undefined,
+  callback: (payload: P | undefined) => void,
+): void
+```
+
+The receiving counterpart of `useExecutionAt`. When an operation is requested through an Execution Request prop, it runs `callback` with the request's `payload`. The operation runs after the browser paints (`useEffect`).
+
+- It runs only when `request.at` changes. `payload` is not compared.
+- Requests made before mount are not run, including a request that was already passed at mount.
+- If multiple requests are made before the next render, only the last one is run.
+- The latest `callback` is called. Changing the reference of `callback` does not run it.
+- An `undefined` `request` is treated as no request, so an optional prop can be passed as is.
+
+```tsx
+type Props = { undoAt?: ExecutionRequest<string> };
+
+function WrappedImperativeComponent({ undoAt }: Props) {
+  const instance = useConstant(() => createImperativeComponent());
+  useExecutionEffect(undoAt, (payload) => {
+    instance.undo(payload);
+  });
+  // ...
+}
+```
+
+| Parameter  | Type                                | Description                                      |
+| ---------- | ----------------------------------- | ------------------------------------------------ |
+| `request`  | `ExecutionRequest<P> \| undefined`  | The value of the received Execution Request prop |
+| `callback` | `(payload: P \| undefined) => void` | The operation to run when requested              |
+
+### `useExecutionLayoutEffect`
+
+```ts
+useExecutionLayoutEffect<P = void>(
+  request: ExecutionRequest<P> | undefined,
+  callback: (payload: P | undefined) => void,
+): void
+```
+
+A version of `useExecutionEffect` that runs the operation before the browser paints (`useLayoutEffect`). Use it for operations whose result should be reflected before painting, such as adjusting the scroll position or measuring again. Requests and parameters are handled the same way as `useExecutionEffect`.
+
+### `useIsHydrated`
+
+```ts
+useIsHydrated(): boolean
+```
+
+Returns whether hydration has finished. Use it to render client-only values (`window`, `localStorage`, the viewport width, and so on) without causing a hydration mismatch.
+
+- Returns `false` during server rendering and hydration, and `true` afterwards.
+- Returns `true` from the start in components mounted after hydration and in client-only rendering.
+- Unlike checking `typeof window`, it returns `false` during hydration even on the client, so the output matches the server HTML.
+
+```tsx
+const isHydrated = useIsHydrated();
+
+<p>{isHydrated ? navigator.userAgent : ''}</p>;
+```
+
 ### `useIsMounted`
 
 ```ts
@@ -151,6 +219,38 @@ When the value changes, the previous value is updated by a state update during r
 | `initialValue?` | `T`                                     | The value returned until the value changes for the first time                         |
 | `isEqual?`      | `(oldValue: T, newValue: T) => boolean` | A comparison that returns `true` for values considered equal. Defaults to `Object.is` |
 
+### `useRerender`
+
+```ts
+useRerender(): () => void
+```
+
+Returns a function that only triggers a re-render. Use it when you want to render again without holding a value (for example, to show external state after reading it again).
+
+- The returned function always keeps the same reference.
+
+### `useStableCallback`
+
+```ts
+useStableCallback<A extends unknown[], R>(
+  callback: (...args: A) => R,
+): (...args: A) => R
+```
+
+Returns a function whose reference never changes and that calls the latest `callback`. Use it to keep the reference of an event handler passed to child components while always running the latest logic.
+
+- The returned function always keeps the same reference.
+- The latest `callback` is applied on commit. Do not call the function during rendering (the previous `callback` would be called). Call it from event handlers or effects.
+- React 19.2's `useEffectEvent` can only be called from effects, while the function returned by this hook can also be passed to child components.
+
+```tsx
+const handleSelect = useStableCallback((id: string) => {
+  onSelect(id, filter);
+});
+
+<MemoizedList onSelect={handleSelect} />;
+```
+
 ### `useStableLength`
 
 ```ts

package/_helpers/_useExecutionHandler.cjs

@@ -0,0 +1,37 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_hooks_useConstant_useConstant = require("../hooks/useConstant/useConstant.cjs");
+require("../hooks/useConstant/index.cjs");
+const require_utils_markAt_markAt = require("../utils/markAt/markAt.cjs");
+const require_hooks_useLatestRef_useLatestRef = require("../hooks/useLatestRef/useLatestRef.cjs");
+require("../hooks/useLatestRef/index.cjs");
+let react = require("react");
+
+//#region src/_helpers/_useExecutionHandler.ts
+/**
+* Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
+*
+* `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
+*
+* - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
+*   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+* - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
+* - コールバックは最新のものを呼ぶ
+*
+* @param request 受け取った Execution Request。undefined の場合は要求なし
+* @param callback 要求があったときに実行する処理
+* @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
+*/
+function useExecutionHandler(request, callback) {
+	const callbackRef = require_hooks_useLatestRef_useLatestRef.default(callback);
+	const baseline = require_hooks_useConstant_useConstant.default(require_utils_markAt_markAt.default);
+	const handledAtRef = (0, react.useRef)(baseline);
+	return (0, react.useCallback)(() => {
+		if (request && request.at > handledAtRef.current) {
+			handledAtRef.current = request.at;
+			callbackRef.current(request.payload);
+		}
+	}, [request, callbackRef]);
+}
+
+//#endregion
+exports.default = useExecutionHandler;

package/_helpers/_useExecutionHandler.d.cts

@@ -0,0 +1,18 @@
+import { ExecutionRequest } from "../hooks/useExecutionAt/types.cjs";
+//#region src/_helpers/_useExecutionHandler.d.ts
+/**
+ * Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
+ *
+ * `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
+ *
+ * - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
+ *   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+ * - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
+ * - コールバックは最新のものを呼ぶ
+ *
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param callback 要求があったときに実行する処理
+ * @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
+ */
+declare function useExecutionHandler<P>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): () => void;
+export = useExecutionHandler;

package/_helpers/_useExecutionHandler.d.mts

@@ -0,0 +1,18 @@
+import { ExecutionRequest } from "../hooks/useExecutionAt/types.mjs";
+//#region src/_helpers/_useExecutionHandler.d.ts
+/**
+ * Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
+ *
+ * `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
+ *
+ * - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
+ *   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+ * - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
+ * - コールバックは最新のものを呼ぶ
+ *
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param callback 要求があったときに実行する処理
+ * @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
+ */
+export default function useExecutionHandler<P>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): () => void;
+//#endregion

package/_helpers/_useExecutionHandler.mjs

@@ -0,0 +1,36 @@
+import useConstant from "../hooks/useConstant/useConstant.mjs";
+import "../hooks/useConstant/index.mjs";
+import markAt from "../utils/markAt/markAt.mjs";
+import useLatestRef from "../hooks/useLatestRef/useLatestRef.mjs";
+import "../hooks/useLatestRef/index.mjs";
+import { useCallback, useRef } from "react";
+
+//#region src/_helpers/_useExecutionHandler.ts
+/**
+* Execution Request を受け取り、要求があれば処理を実行する関数を返すフック
+*
+* `useExecutionEffect`・`useExecutionLayoutEffect` に共通の処理。返す関数をエフェクトで呼ぶ。
+*
+* - 初回のレンダリングで `markAt()` の値を基準にし、`at` がそれより大きい要求だけを実行する。
+*   `at` は `markAt()` で単調に増えるため、マウントより前に出た要求は実行しない
+* - 一度実行した要求は、エフェクトが再実行されても（StrictMode など）実行しない
+* - コールバックは最新のものを呼ぶ
+*
+* @param request 受け取った Execution Request。undefined の場合は要求なし
+* @param callback 要求があったときに実行する処理
+* @returns エフェクトで呼ぶ関数。参照は request が変わったときだけ変わる
+*/
+function useExecutionHandler(request, callback) {
+	const callbackRef = useLatestRef(callback);
+	const baseline = useConstant(markAt);
+	const handledAtRef = useRef(baseline);
+	return useCallback(() => {
+		if (request && request.at > handledAtRef.current) {
+			handledAtRef.current = request.at;
+			callbackRef.current(request.payload);
+		}
+	}, [request, callbackRef]);
+}
+
+//#endregion
+export { useExecutionHandler as default };

package/hooks/index.cjs

@@ -7,17 +7,32 @@ const require_hooks_useConstant_useConstant = require("./useConstant/useConstant
 require("./useConstant/index.cjs");
 const require_hooks_useExecutionAt_useExecutionAt = require("./useExecutionAt/useExecutionAt.cjs");
 require("./useExecutionAt/index.cjs");
-const require_hooks_useIsMounted_useIsMounted = require("./useIsMounted/useIsMounted.cjs");
-require("./useIsMounted/index.cjs");
 const require_hooks_useLatestRef_useLatestRef = require("./useLatestRef/useLatestRef.cjs");
 require("./useLatestRef/index.cjs");
+const require_hooks_useExecutionEffect_useExecutionEffect = require("./useExecutionEffect/useExecutionEffect.cjs");
+require("./useExecutionEffect/index.cjs");
+const require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect = require("./useExecutionLayoutEffect/useExecutionLayoutEffect.cjs");
+require("./useExecutionLayoutEffect/index.cjs");
+const require_hooks_useIsHydrated_useIsHydrated = require("./useIsHydrated/useIsHydrated.cjs");
+require("./useIsHydrated/index.cjs");
+const require_hooks_useIsMounted_useIsMounted = require("./useIsMounted/useIsMounted.cjs");
+require("./useIsMounted/index.cjs");
 const require_hooks_usePreviousValue_usePreviousValue = require("./usePreviousValue/usePreviousValue.cjs");
 require("./usePreviousValue/index.cjs");
+const require_hooks_useRerender_useRerender = require("./useRerender/useRerender.cjs");
+require("./useRerender/index.cjs");
+const require_hooks_useStableCallback_useStableCallback = require("./useStableCallback/useStableCallback.cjs");
+require("./useStableCallback/index.cjs");
 
 exports.useCombinedRefs = require_hooks_useCombinedRefs_useCombinedRefs.default;
 exports.useConstant = require_hooks_useConstant_useConstant.default;
 exports.useExecutionAt = require_hooks_useExecutionAt_useExecutionAt.default;
+exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;
+exports.useExecutionLayoutEffect = require_hooks_useExecutionLayoutEffect_useExecutionLayoutEffect.default;
+exports.useIsHydrated = require_hooks_useIsHydrated_useIsHydrated.default;
 exports.useIsMounted = require_hooks_useIsMounted_useIsMounted.default;
 exports.useLatestRef = require_hooks_useLatestRef_useLatestRef.default;
 exports.usePreviousValue = require_hooks_usePreviousValue_usePreviousValue.default;
+exports.useRerender = require_hooks_useRerender_useRerender.default;
+exports.useStableCallback = require_hooks_useStableCallback_useStableCallback.default;
 exports.useStableLength = require_hooks_useStableLength_useStableLength.default;

package/hooks/index.d.cts

@@ -1,12 +1,17 @@
+import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.cjs";
+import useExecutionAt from "./useExecutionAt/useExecutionAt.cjs";
 import useCombinedRefs from "./useCombinedRefs/useCombinedRefs.cjs";
 import "./useCombinedRefs/index.cjs";
 import useConstant from "./useConstant/useConstant.cjs";
-import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.cjs";
-import useExecutionAt from "./useExecutionAt/useExecutionAt.cjs";
+import useExecutionEffect from "./useExecutionEffect/useExecutionEffect.cjs";
+import useExecutionLayoutEffect from "./useExecutionLayoutEffect/useExecutionLayoutEffect.cjs";
+import useIsHydrated from "./useIsHydrated/useIsHydrated.cjs";
 import useIsMounted from "./useIsMounted/useIsMounted.cjs";
 import { LatestRef } from "./useLatestRef/types.cjs";
 import useLatestRef from "./useLatestRef/useLatestRef.cjs";
 import { UsePreviousValueOptions } from "./usePreviousValue/types.cjs";
 import usePreviousValue from "./usePreviousValue/usePreviousValue.cjs";
+import useRerender from "./useRerender/useRerender.cjs";
+import useStableCallback from "./useStableCallback/useStableCallback.cjs";
 import useStableLength from "./useStableLength/useStableLength.cjs";
-export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/index.d.mts

@@ -1,12 +1,17 @@
+import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.mjs";
+import useExecutionAt from "./useExecutionAt/useExecutionAt.mjs";
 import useCombinedRefs from "./useCombinedRefs/useCombinedRefs.mjs";
 import "./useCombinedRefs/index.mjs";
 import useConstant from "./useConstant/useConstant.mjs";
-import { ExecutionFunction, ExecutionRequest, UseExecutionAtOptions, UseExecutionAtResult } from "./useExecutionAt/types.mjs";
-import useExecutionAt from "./useExecutionAt/useExecutionAt.mjs";
+import useExecutionEffect from "./useExecutionEffect/useExecutionEffect.mjs";
+import useExecutionLayoutEffect from "./useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
+import useIsHydrated from "./useIsHydrated/useIsHydrated.mjs";
 import useIsMounted from "./useIsMounted/useIsMounted.mjs";
 import { LatestRef } from "./useLatestRef/types.mjs";
 import useLatestRef from "./useLatestRef/useLatestRef.mjs";
 import { UsePreviousValueOptions } from "./usePreviousValue/types.mjs";
 import usePreviousValue from "./usePreviousValue/usePreviousValue.mjs";
+import useRerender from "./useRerender/useRerender.mjs";
+import useStableCallback from "./useStableCallback/useStableCallback.mjs";
 import useStableLength from "./useStableLength/useStableLength.mjs";
-export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { type ExecutionFunction, type ExecutionRequest, type LatestRef, type UseExecutionAtOptions, type UseExecutionAtResult, type UsePreviousValueOptions, useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/index.mjs

@@ -6,11 +6,21 @@ import useConstant from "./useConstant/useConstant.mjs";
 import "./useConstant/index.mjs";
 import useExecutionAt from "./useExecutionAt/useExecutionAt.mjs";
 import "./useExecutionAt/index.mjs";
-import useIsMounted from "./useIsMounted/useIsMounted.mjs";
-import "./useIsMounted/index.mjs";
 import useLatestRef from "./useLatestRef/useLatestRef.mjs";
 import "./useLatestRef/index.mjs";
+import useExecutionEffect from "./useExecutionEffect/useExecutionEffect.mjs";
+import "./useExecutionEffect/index.mjs";
+import useExecutionLayoutEffect from "./useExecutionLayoutEffect/useExecutionLayoutEffect.mjs";
+import "./useExecutionLayoutEffect/index.mjs";
+import useIsHydrated from "./useIsHydrated/useIsHydrated.mjs";
+import "./useIsHydrated/index.mjs";
+import useIsMounted from "./useIsMounted/useIsMounted.mjs";
+import "./useIsMounted/index.mjs";
 import usePreviousValue from "./usePreviousValue/usePreviousValue.mjs";
 import "./usePreviousValue/index.mjs";
+import useRerender from "./useRerender/useRerender.mjs";
+import "./useRerender/index.mjs";
+import useStableCallback from "./useStableCallback/useStableCallback.mjs";
+import "./useStableCallback/index.mjs";
 
-export { useCombinedRefs, useConstant, useExecutionAt, useIsMounted, useLatestRef, usePreviousValue, useStableLength };
+export { useCombinedRefs, useConstant, useExecutionAt, useExecutionEffect, useExecutionLayoutEffect, useIsHydrated, useIsMounted, useLatestRef, usePreviousValue, useRerender, useStableCallback, useStableLength };

package/hooks/useExecutionEffect/index.cjs

@@ -0,0 +1,5 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require_hooks_useExecutionEffect_useExecutionEffect = require("./useExecutionEffect.cjs");
+
+exports.default = require_hooks_useExecutionEffect_useExecutionEffect.default;
+exports.useExecutionEffect = require_hooks_useExecutionEffect_useExecutionEffect.default;

package/hooks/useExecutionEffect/index.d.cts

@@ -0,0 +1,2 @@
+import useExecutionEffect from "./useExecutionEffect.cjs";
+export { useExecutionEffect as default, useExecutionEffect };

package/hooks/useExecutionEffect/index.d.mts

@@ -0,0 +1,2 @@
+import useExecutionEffect from "./useExecutionEffect.mjs";
+export { useExecutionEffect as default, useExecutionEffect };

package/hooks/useExecutionEffect/index.mjs

@@ -0,0 +1,3 @@
+import useExecutionEffect from "./useExecutionEffect.mjs";
+
+export { useExecutionEffect as default, useExecutionEffect };

package/hooks/useExecutionEffect/useExecutionEffect.cjs

@@ -0,0 +1,37 @@
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const require__helpers__useExecutionHandler = require("../../_helpers/_useExecutionHandler.cjs");
+let react = require("react");
+
+//#region src/hooks/useExecutionEffect/useExecutionEffect.ts
+/**
+* Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
+*
+* `useExecutionAt` と対になる、受け取る側のフック。
+* 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
+* 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
+*
+* - `at` が変わったときだけ実行する（`payload` は比べない）
+* - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+* - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
+* - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+*
+* @param request 受け取った Execution Request。undefined の場合は要求なし
+* @param callback 要求があったときに実行する処理。要求の payload を受け取る
+* @example
+* // 呼び出す側
+* const [undoAt, undo] = useExecutionAt<string>();
+* <WrappedImperativeComponent undoAt={undoAt} />
+* // 受け取る側（WrappedImperativeComponent の中）
+* useExecutionEffect(props.undoAt, (payload) => {
+*   instance.undo(payload);
+* });
+*/
+function useExecutionEffect(request, callback) {
+	const handle = require__helpers__useExecutionHandler.default(request, callback);
+	(0, react.useEffect)(() => {
+		handle();
+	}, [handle]);
+}
+
+//#endregion
+exports.default = useExecutionEffect;

package/hooks/useExecutionEffect/useExecutionEffect.d.cts

@@ -0,0 +1,27 @@
+import { ExecutionRequest } from "../useExecutionAt/types.cjs";
+//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
+/**
+ * Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
+ *
+ * `useExecutionAt` と対になる、受け取る側のフック。
+ * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
+ * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
+ *
+ * - `at` が変わったときだけ実行する（`payload` は比べない）
+ * - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+ * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+ *
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
+ * @example
+ * // 呼び出す側
+ * const [undoAt, undo] = useExecutionAt<string>();
+ * <WrappedImperativeComponent undoAt={undoAt} />
+ * // 受け取る側（WrappedImperativeComponent の中）
+ * useExecutionEffect(props.undoAt, (payload) => {
+ *   instance.undo(payload);
+ * });
+ */
+declare function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
+export = useExecutionEffect;

package/hooks/useExecutionEffect/useExecutionEffect.d.mts

@@ -0,0 +1,27 @@
+import { ExecutionRequest } from "../useExecutionAt/types.mjs";
+//#region src/hooks/useExecutionEffect/useExecutionEffect.d.ts
+/**
+ * Execution Request プロパティ（xxxAt）を受け取り、要求があったときに処理を実行するフック
+ *
+ * `useExecutionAt` と対になる、受け取る側のフック。
+ * 命令的なコンポーネントをラップした React のコンポーネントで、プロパティを通じてメソッドを実行する。
+ * 処理は画面に表示した後（`useEffect`）に実行する。表示する前に実行する場合は `useExecutionLayoutEffect` を使う。
+ *
+ * - `at` が変わったときだけ実行する（`payload` は比べない）
+ * - マウントより前に出た要求（マウントしたときにすでに渡されていた要求を含む）は実行しない
+ * - 次のレンダリングまでに複数回要求した場合は、最後の要求だけを実行する
+ * - コールバックは最新のものを呼ぶ。参照が変わっても実行しない
+ *
+ * @param request 受け取った Execution Request。undefined の場合は要求なし
+ * @param callback 要求があったときに実行する処理。要求の payload を受け取る
+ * @example
+ * // 呼び出す側
+ * const [undoAt, undo] = useExecutionAt<string>();
+ * <WrappedImperativeComponent undoAt={undoAt} />
+ * // 受け取る側（WrappedImperativeComponent の中）
+ * useExecutionEffect(props.undoAt, (payload) => {
+ *   instance.undo(payload);
+ * });
+ */
+export default function useExecutionEffect<P = void>(request: ExecutionRequest<P> | undefined, callback: (payload: P | undefined) => void): void;
+//#endregion