React 18 の useId を調べる

[mziyut]

https://qiita.com/xrxoxcxox/items/2c498537292c6388cb80

facebook/react#22644

https://react.dev/blog/2022/03/29/react-v18#useid

https://jser.dev/2023-04-25-how-does-useid-work/

https://plainenglish.io/blog/the-useid-hook-in-react-18-take-a-look

https://blog.openreplay.com/understanding-the-useid-hook-in-react/

React 18のuseIdでアクセシビリティ向上（WAI-ARIAのRelationship attributes） - Qiita

この記事の概要 React 18で新しくuseIdというhooksが使えるようになりました。 コンポーネントにWAI-ARIAを導入するにあたって、便利になると思ったのでいくつかのパターンを紹介します。 また、Qiita Engin...

React v18.0 – React

The library for web and native user interfaces

How does useId() work internally in React?

JSer explains to you useId() works internally, so you can understand it better

An Introduction to the useId() Hook in React 18

The useId() hook is a new way to generate a unique random Id in React 18

Understanding the useId hook in React

The new hook in React 18, explained

[mziyut]

useId を使う上での注意

key list には使わない

Component に渡す key には利用しないこと。 key list には以下を使う

• データ固有の ID
• uuid

CSR, SSR を併用する場合は Dom tree 構造を同一にする

useId() で生成される id は Dom がどのように構成されるかで変わる。 CSR, SSR を併用する場合は Dom tree が完全に同一にするようにする

Ref: React v18.0 – React Ref: useId – React

[mziyut]

useId() の内部処理

• mountId()
  • 初期レンダリングの時に呼ばれる
  • 生成された id は memoizedState に保存される
    • 処理的には useState とかと一緒
      • React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた

https://github.com/facebook/react/pull/22644/files#diff-cfa128bca4d5b386950dc89bf856c5b071a8a081cf7edce12802a415eef1e72dR2136-R2161

• updateId()
  • 再レンダリング用の関数。
  • memoizedState に保存した id を取得する

https://github.com/facebook/react/pull/22644/files#diff-d0d3346ffbaafc7b47ed46f19ccdd179480fa697033bed903c60d8455a9ce8bbR2163-R2167

• getTreeId()
  • Dom tree の構造から tree_id を生成する

https://github.com/facebook/react/pull/22644/files#diff-24061ef83e7fb8e55665173918d607b7b17c1af3344b8fb4eee1ee8eb754d0bfR97-R102

• pushTreeId()
  • useId を生成するために fiber、親 node 情報、位置 を元に生成するが....

https://github.com/facebook/react/pull/22644/files#diff-10eea496420f5a9c100448ac2daf54e0ce6d5c6db3b4262d159c90619c596c0dR132-R202

useId by acdlite · Pull Request #22644 · facebook/react

Incremental hydration Empty nodes inside arrays Long sequences (> 32 bits) Add comments to explain the id generation algorithm In Fiber, find better way to get the number of children in the ...

useId by acdlite · Pull Request #22644 · facebook/react

Incremental hydration Empty nodes inside arrays Long sequences (> 32 bits) Add comments to explain the id generation algorithm In Fiber, find better way to get the number of children in the ...

useId by acdlite · Pull Request #22644 · facebook/react

Incremental hydration Empty nodes inside arrays Long sequences (> 32 bits) Add comments to explain the id generation algorithm In Fiber, find better way to get the number of children in the ...

useId by acdlite · Pull Request #22644 · facebook/react

Incremental hydration Empty nodes inside arrays Long sequences (> 32 bits) Add comments to explain the id generation algorithm In Fiber, find better way to get the number of children in the ...

[mziyut]

pushTreeId() をもう少し深掘る

解説記事無いか探したら出てきたので 解説記事と test コードからどのような処理をするか

https://jser.dev/2023-04-25-how-does-useid-work/

https://github.com/acdlite/react/blob/371302f0144079a7b9f04c3c485ee19cf82b936f/packages/react-dom/src/__tests__/ReactDOMUseId-test.js

前提条件

• <DivWithId /> が存在するこれは useId() を callしたときに付与される id を <div id="1" /> のように出力する

child 複数存在せず、 nest する場合

<div>
<DivWithId>
<DivWithId />
</DivWithId>
</div>

<div>
<div id="0">      // 00
<div id="1" />  // 01
</div>
</div>

child が複数ある場合

<div>
<DivWithId />
<DivWithId />
</div>

<div>
<div id="1" />  // 01
<div id="10" /> // 10
</div>

child が複数あり、nest している場合

<div>
<DivWithId>
<DivWithId />
</DivWithId>
<DivWithId />
</div>

<div>
<div id="1">        // 00
<div id="101" />  // 0101
</div>
<div id="10" />     // 10
<div id="11" />     // 11
</div>

のように bit 演算して dom tree から useId() に使う 数値を生成している
また、 32 bit を超えたとき (overflow) したときは ベースとなる id を残し encode するなど行っている

https://github.com/facebook/react/pull/22644/files#diff-10eea496420f5a9c100448ac2daf54e0ce6d5c6db3b4262d159c90619c596c0dR156-R202

How does useId() work internally in React?

JSer explains to you useId() works internally, so you can understand it better

react/packages/react-dom/src/__tests__/ReactDOMUseId-test.js at 371302f0144079a7b9f04c3c485ee19cf82b936f · acdlite/react

A declarative, efficient, and flexible JavaScript library for building user interfaces. - acdlite/react

useId by acdlite · Pull Request #22644 · facebook/react

Incremental hydration Empty nodes inside arrays Long sequences (> 32 bits) Add comments to explain the id generation algorithm In Fiber, find better way to get the number of children in the ...