React 19で、refのコールバックに後片付けの関数を返す方法

import { log, name } from './log';

// 後片付けの関数を返す ref コールバック（毎回の描画で新しい関数になる）
export function WithCleanup({ label }: { label: string }) {
  return (
    <div
      ref={(node) => {
        log(`ref ${name(node)} (${label})`);
        return () => {
          log(`cleanup (${label})`);
        };
      }}
    >
      {label}
    </div>
  );
}

react 19.3.1

[A. 後片付けの関数を返す（インラインの関数）]
  1. 描画
    ref <div> (one)
  2. props を変えて再描画
    cleanup (one)
    ref <div> (two)
  3. 削除
    cleanup (two)

[B. 何も返さない（インラインの関数）]
  1. 描画
    ref <div> (one)
  2. props を変えて再描画
    ref null (one)
    ref <div> (two)
  3. 削除
    ref null (two)

react 18.3.1

[A. 後片付けの関数を返す（インラインの関数）]
  1. 描画
    ref <div> (one)
    console.error: Warning: Unexpected return value from a callback ref in div. A callback ref should not return a function.
  2. props を変えて再描画
    ref null (one)
    ref <div> (two)
    console.error: Warning: Unexpected return value from a callback ref in div. A callback ref should not return a function. （2回）
  3. 削除
    ref null (two)
    console.error: Warning: Unexpected return value from a callback ref in div. A callback ref should not return a function.

import { useCallback } from 'react';
import { log, name } from './log';

// useCallback で同じ関数を渡し続ける ref コールバック
export function StableCallback({ label }: { label: string }) {
  const ref = useCallback((node: HTMLDivElement | null) => {
    log(`ref ${name(node)}`);
    return () => {
      log('cleanup');
    };
  }, []);
  return <div ref={ref}>{label}</div>;
}

[C. useCallback で同じ関数を渡す]
  1. 描画
    ref <div>
  2. props を変えて再描画
  3. 削除
    cleanup

[D. StrictMode の中で A を描画]
  1. 描画
    ref <div> (one)
    cleanup (one)
    ref <div> (one)
  2. 削除
    cleanup (one)

[D. StrictMode の中で A を描画]
  1. 描画
    ref <div> (one)
  2. 削除
    ref null (one)

import { useRef } from 'react';
import { probe } from './log';

// 公式ドキュメントの例と同じく、項目ごとの DOM ノードを Map で持つ
export function CatList({ cats }: { cats: string[] }) {
  const itemsRef = useRef<Map<string, HTMLLIElement | null>>(new Map());
  const map = itemsRef.current;
  probe.map = map; // 検証用
  return (
    <ul>
      {cats.map((cat) => (
        <li
          key={cat}
          ref={(node) => {
            map.set(cat, node);
            return () => {
              map.delete(cat);
            };
          }}
        >
          {cat}
        </li>
      ))}
    </ul>
  );
}

[F. 項目ごとの DOM ノードを Map で持つ]
  1. Neo, Millie, Bella を表示
    map size=3 { Neo=<li>, Millie=<li>, Bella=<li> }
  2. Millie を消す
    map size=2 { Neo=<li>, Bella=<li> }
  3. Bella を消す
    map size=1 { Neo=<li> }
  4. Luna を足す
    map size=2 { Neo=<li>, Luna=<li> }

  2. Millie を消す
    map size=3 { Neo=<li>, Millie=null, Bella=<li> }
  3. Bella を消す
    map size=3 { Neo=<li>, Millie=null, Bella=null }
  4. Luna を足す
    map size=4 { Neo=<li>, Millie=null, Bella=null, Luna=<li> }

import { useImperativeHandle, type Ref } from 'react';
import { log } from './log';

type CounterHandle = { reset: () => void };

// useImperativeHandle で、DOM ではなく独自のオブジェクトを ref に渡す子
function Counter({ ref }: { ref?: Ref<CounterHandle> }) {
  useImperativeHandle(ref, () => ({ reset: () => {} }), []);
  return <p>counter</p>;
}

export function HandleParent() {
  return (
    <Counter
      ref={(handle) => {
        log(`ref ${handle ? `{ ${Object.keys(handle).join(', ')} }` : 'null'}`);
        return () => {
          log('cleanup');
        };
      }}
    />
  );
}

[E. useImperativeHandle の ref に後片付けの関数を返す]
  1. 描画
    ref { reset }
  2. 削除
    cleanup

let instance: HTMLDivElement | null = null;

// 1つ目：アロー関数の式で代入して、その値を返してしまう書き方
export const A = () => <div ref={(current) => (instance = current)} />;
// 2つ目：ブロックで書けば何も返さない
export const B = () => <div ref={(current) => { instance = current; }} />;

src/TypeError.tsx(4,29): error TS2322: Type '(current: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
  Type '(current: HTMLDivElement | null) => HTMLDivElement | null' is not assignable to type '(instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)'.
    Type 'HTMLDivElement | null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
      Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.
tsc exit=1

$ npx types-react-codemod no-implicit-ref-callback-return target

4c4,6
< export const A = () => <div ref={(current) => (instance = current)} />;
---
> export const A = () => <div ref={current => {
>   (instance = current);
> }} />;