React useIdの生成方式

https://ja.react.dev/reference/react/useId

これの理由について社内勉強会で考察してた。

と言っても答えはここにある。

ハイドレーションがあると、クライアント側でDOMが変わる。

クライアントコンポーネントがハイドレートされる順序は、サーバ HTML が出力された順序と一致しない可能性があるため、これをインクリメントカウンタで保証することは非常に困難です。

こうあるわけで、クライアント側ではJSが非同期で読み込まれる場合があるため、カウンタを使うとIDの順序がサーバー側とバラバラになる。なので、順序を保証できない。

React 内部では、呼び出し元コンポーネントの “親のパス (parent path)” から useId が生成されます。

とあるため、増分カウンタではなくこっちの方法であれば、一致するIDが生成できるってわけ。

サーバ上とクライアント上でレンダーされるツリーが正確に一致しない場合、生成される ID は一致しません。

この一致しない理由もID生成の方式によるため。