Use Keyed Mount Effect

1"use client";
2 
3import { useEffect } from "react";
4 
5/**
6 * Hook variant of <KeyedRunner>. Runs `effect` each time `key` changes
7 * (including the first mount). Returned cleanup runs before the next run
8 * and on unmount. No-ops when `key` is `null`.
9 *
10 * This exists ONLY for library hooks whose internals need reactive
11 * post-commit side effects. Prefer <KeyedRunner> in component code.
12 */
13export function useKeyedMountEffect(
14  key: string | null,
15  effect: () => void | (() => void),
16) {
17  // eslint-disable-next-line no-restricted-syntax
18  useEffect(() => {
19    if (key === null) return;
20    return effect();
21    // The effect closure is intentionally captured at each key change;
22    // eslint's exhaustive-deps would demand we include `effect`, but
23    // the semantics are key-driven, not effect-identity-driven.
24     
25  }, [key]);
26}