<h2>情報源</h2>
<ul>
<li><a href="https://github.com/reactjs/rfcs/blob/main/text/0214-use-sync-external-store.md" target="_blank" rel="nofollow noopener noreferrer">https://github.com/reactjs/rfcs/blob/main/text/0214-use-sync-external-store.md</a></li>
</ul>
<h2>まとめ</h2>
<h3>基本的な例</h3>
<ul>
<li>useSyncExternalStore は外部ソースの読み込み、サブスクライブを行うための標準のフックである。</li>
<li>concurrent rendering と互換性がある。</li>
<li>useSyncExternalStore は以下のように使用する。</li>
</ul>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { useSyncExternalStore } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react&quot;</span>;

<span class="hljs-keyword">const</span> state = <span class="hljs-title function_">useSyncExternalStore</span>(store.<span class="hljs-property">subscribe</span>, store.<span class="hljs-property">getSnapshot</span>);
</code></pre>
<ul>
<li>サーバーとクライアント間でのミスマッチを防止する目的でサーバーレンダリングとハイドレーションの間に初期のスナップショット読み込む。</li>
</ul>
<pre><code class="language-js"><span class="hljs-keyword">const</span> selectedField = <span class="hljs-title function_">useSyncExternalStore</span>(
  store.<span class="hljs-property">subscribe</span>,
  <span class="hljs-function">() =&gt;</span> store.<span class="hljs-title function_">getSnapshot</span>().<span class="hljs-property">selectedField</span>,
  <span class="hljs-function">() =&gt;</span> <span class="hljs-variable constant_">INITIAL_SERVER_SNAPSHOT</span>.<span class="hljs-property">selectedField</span>
);
</code></pre>
<blockquote>
<p>getSnapshot is used to check if the subscribed value has changed since the
last time it was rendered, so the result needs to be referentially stable.
That means it either needs to be an immutable value like a string or number,
or it needs to be a cached/memoized object.`</p>
</blockquote>
<ul>
<li>getSnapshot はサブスクライブした値が前回のレンダーから変化したかどうかをチェックするのに使用される。</li>
<li>なのでその結果は参照が安定している必要がある。</li>
</ul>
<blockquote>
<p>That means it either needs to be an immutable value like a string or number,
or it needs to be a cached/memoized object.`</p>
</blockquote>
<p>どういう意味かわからなかった。</p>
<h3></h3>
<ul>
<li>Motivation</li>
</ul>


useSyncExternalStoreに関するまとめ