Open 2023/04/09にコメント追加 5

useSyncExternalStore の内部実装を探る

まずHooksの実装を探す。 react パッケージの ReactHooks.js を確認する。
</span><a href="https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js</a></p> <p>全てのHooksが、<code>dispatcher.useSyncExternalStore</code> のような形で呼び出されている。</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword module">export</span> <span class="token keyword">function</span> useSyncExternalStore<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">(</span> <span class="token function-variable function">subscribe</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token keyword">void</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span> <span class="token function-variable function">getSnapshot</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">,</span> getServerSnapshot<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token constant">T</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> dispatcher <span class="token operator">=</span> <span class="token function">resolveDispatcher</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">return</span> dispatcher<span class="token punctuation">.</span><span class="token method function property-access">useSyncExternalStore</span><span class="token punctuation">(</span> subscribe<span class="token punctuation">,</span> getSnapshot<span class="token punctuation">,</span> getServerSnapshot<span class="token punctuation">,</span> </code></pre></div><p>なので <code>dispatcher</code> の実体を確認してみる。</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4"><svg class="LikeButton_svgLike__Gl0Sz" viewbox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"/><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"/><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"/><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"/><circle cx="13" cy="19" fill="#c067f4" r="5"/><circle cx="77" cy="9" fill="#f76685" r="5"/><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"/><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"/><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"/><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"/><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"/><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"/></g></svg></button></div><button class="ThreadItemContent_reply___ZYlC"><svg viewbox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"/></svg><span>返信</span></button></footer></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-3bbf284b8c7b46"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/yuta4j1"><img alt="yuta4j1" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--UrKpnvQ2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/213fcaea9b.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/yuta4j1">yuta4j1</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-3bbf284b8c7b46"><time aria-label="2023年4月9日 17時46分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-04-09T08:46:36+00:00" role="tooltip">2023/04/09に更新</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewbox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"/></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p>dispatcherの型定義は、 <code>react-reconciler</code> パッケージの、<code>ReactInternalTypes.js</code>に置かれている。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__e0deb681275f6" src="https://embed.zenn.studio/github#zenn-embedded__e0deb681275f6" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactInternalTypes.js%23L375-L425" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactInternalTypes.js#L375-L425" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactInternalTypes.js#L375-L425</a></p> <p>なので実体の実装も、<code>react-reconciler</code> に置かれていそう。</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4"><svg class="LikeButton_svgLike__Gl0Sz" viewbox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"/><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"/><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"/><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"/><circle cx="13" cy="19" fill="#c067f4" r="5"/><circle cx="77" cy="9" fill="#f76685" r="5"/><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"/><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"/><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"/><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"/><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"/><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"/></g></svg></button></div><button class="ThreadItemContent_reply___ZYlC"><svg viewbox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"/></svg><span>返信</span></button></footer></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-ea901764276ae8"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/yuta4j1"><img alt="yuta4j1" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--UrKpnvQ2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/213fcaea9b.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/yuta4j1">yuta4j1</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-ea901764276ae8"><time aria-label="2023年4月9日 18時3分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-04-09T09:03:48+00:00" role="tooltip">2023/04/09に更新</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewbox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"/></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p><code>ReactFiberHooks.js</code> に、Hooksの実装がある雰囲気。<br/> RenderWithHooks関数にて、Dispatcher がセットされている。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__975dc5a888509" src="https://embed.zenn.studio/github#zenn-embedded__975dc5a888509" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactFiberHooks.js%23L437-L497" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L437-L497" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L437-L497</a></p> <p>Mount時とUpdate時で、使用するDispatcherを使い分けている<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__67da8c7eef0bd" src="https://embed.zenn.studio/github#zenn-embedded__67da8c7eef0bd" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactFiberHooks.js%23L476-L497" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L476-L497" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L476-L497</a><br style=""/> <code>HooksDispatcherOnMount</code> と <code>HooksDispatcherOnUpdate</code>それぞれのDispatcherを確認してみる。</p> </div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4"><svg class="LikeButton_svgLike__Gl0Sz" viewbox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"/><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"/><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"/><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"/><circle cx="13" cy="19" fill="#c067f4" r="5"/><circle cx="77" cy="9" fill="#f76685" r="5"/><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"/><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"/><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"/><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"/><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"/><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"/></g></svg></button></div><button class="ThreadItemContent_reply___ZYlC"><svg viewbox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"/></svg><span>返信</span></button></footer></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-123eb3383b1ca5"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/yuta4j1"><img alt="yuta4j1" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--UrKpnvQ2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/213fcaea9b.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/yuta4j1">yuta4j1</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-123eb3383b1ca5"><time aria-label="2023年4月9日 18時36分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-04-09T09:36:15+00:00" role="tooltip">2023/04/09に更新</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewbox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"/></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p><code>HooksDispatcherOnMount</code> を確認する。<br/> useSyncExternalStore には、<code>mountSyncExternalStore</code> がセットされている。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__e2560e0a92dde" src="https://embed.zenn.studio/github#zenn-embedded__e2560e0a92dde" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactFiberHooks.js%23L2820-L2839" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L2820-L2839" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L2820-L2839</a><br style=""/> <code>mountSyncExternalStore</code> の実装を見に行ってみると、以下の通り。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__00879da73f82d" src="https://embed.zenn.studio/github#zenn-embedded__00879da73f82d" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactFiberHooks.js%23L1598-L1688" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L1598-L1688" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L1598-L1688</a></p> <p>ざっと眺めて、気になるのはここの処理。</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token comment">// Schedule an effect to subscribe to the store.</span> <span class="token function">mountEffect</span><span class="token punctuation">(</span>subscribeToStore<span class="token punctuation">.</span><span class="token method function property-access">bind</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">,</span> fiber<span class="token punctuation">,</span> inst<span class="token punctuation">,</span> subscribe<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>subscribe<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><p><code>subscribeToStore</code> の実装を見てみると、スナップショットが変更された際に、再レンダリングを実行するような処理が見える。（<code>forceStoreRerender</code>）<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__3ad9cfb0105ae" src="https://embed.zenn.studio/github#zenn-embedded__3ad9cfb0105ae" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Fmain%2Fpackages%2Freact-reconciler%2Fsrc%2FReactFiberHooks.js%23L1809-L1824" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L1809-L1824" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L1809-L1824</a></p> <p>useSyncExternalStoreに渡すsubscribe関数の引数にReactから渡されるcallback関数は、この<code>handleStoreChange</code>のことらしい。</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token comment">// useSyncExternalStoreのsubscribe定義の例。</span> <span class="token comment">// 引数のcallbackの実体は、React内部で渡されているhandleStoreChange</span> <span class="token keyword">function</span> <span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'online'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'offline'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token method function property-access">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'online'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token method function property-access">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'offline'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div></div><footer class="ThreadItemContent_footer__WEMyQ"><div class="LikeButton_container__YlckE style-icon"><button aria-label="いいね" class="LikeButton_button__ZwdG4"><svg class="LikeButton_svgLike__Gl0Sz" viewbox="0 0 110 110"><path class="LikeButton_svgLikeLine__f9txR" d="M73,24a23.78,23.78,0,0,0-15.89,6.19,3.14,3.14,0,0,1-4.18,0A23.81,23.81,0,0,0,37,24a22,22,0,0,0-22,22c0,16.67,19.64,32.82,25.11,37.93,2.84,2.65,6.15,5.64,8.92,8.13a8.9,8.9,0,0,0,11.9,0c2.77-2.49,6.07-5.48,8.91-8.13C75.37,78.81,95,62.66,95,46A22,22,0,0,0,73,24Z" fill="currentColor"/><path class="LikeButton_svgLikeInner__uiexS" d="M66.25,76.42c-.71.64-1.32,1.2-1.82,1.67-2.51,2.33-5.39,5-7.94,7.25a2.21,2.21,0,0,1-3,0C51,83,48.1,80.42,45.59,78.09c-.5-.47-1.12-1-1.82-1.67C38.09,71.29,23,57.67,23,46A14,14,0,0,1,37,32a15.92,15.92,0,0,1,11.65,5.23l4.73,5a2.2,2.2,0,0,0,3.23,0l4.72-5A16.06,16.06,0,0,1,73,32,14,14,0,0,1,87,46C87,57.67,71.93,71.29,66.25,76.42Z" fill="currentColor"/><g class="LikeButton_svgLikeDecoration__78UjB"><circle cx="41.5" cy="9.5" fill="#3ea8ff" r="3.5"/><circle cx="98.5" cy="26.5" fill="#ffdc6e" r="3.5"/><circle cx="13" cy="19" fill="#c067f4" r="5"/><circle cx="77" cy="9" fill="#f76685" r="5"/><circle cx="26.5" cy="92.5" fill="#f76685" r="3.5"/><circle cx="105.5" cy="48.5" fill="#c067f4" r="3.5"/><circle cx="4.5" cy="60.5" fill="#3ea8ff" r="3.5"/><circle cx="94.5" cy="73.5" fill="#3ea8ff" r="1.5"/><circle cx="16.5" cy="75.5" fill="#ffdc6e" r="1.5"/><circle cx="78.5" cy="91.5" fill="#ffdc6e" r="1.5"/></g></svg></button></div><button class="ThreadItemContent_reply___ZYlC"><svg viewbox="0 0 27 27" aria-label="コメント" class="ThreadItemContent_replySvg__Hn2Qs" height="19" width="19"><path fill="currentColor" d="M5.9,25.3a1.27,1.27,0,0,1-.6-.1,1.68,1.68,0,0,1-.9-1.3V18.8a8.53,8.53,0,0,1-2.2-6.4C2.2,6.5,6.9,2.3,13.5,2.3S24.8,6.6,24.8,12.4,20,22.6,13.5,22.6a6.36,6.36,0,0,1-2.5-.3L6.7,25A1.6,1.6,0,0,1,5.9,25.3ZM13.5,4.7c-5.2,0-8.8,3.2-8.8,7.7,0,2.4.5,3.7,1.8,5a1.09,1.09,0,0,1,.4.9V22l3.3-2.1a1.38,1.38,0,0,1,1.1-.1,4.49,4.49,0,0,0,2.3.4c5.2,0,8.8-3.2,8.8-7.7S18.7,4.7,13.5,4.7Z"/></svg><span>返信</span></button></footer></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-850f4e9b46b4ec"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/yuta4j1"><img alt="yuta4j1" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--UrKpnvQ2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/213fcaea9b.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/yuta4j1">yuta4j1</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-850f4e9b46b4ec"><time aria-label="2023年4月18日 23時10分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-04-18T14:10:55+00:00" role="tooltip">2023/04/18に更新</time></a><div class="ThreadHeader_actionContainer__8UItF"><button aria-label="メニューを開く" class="PopoverMenuButton_menuButton__hKCa_"><svg viewbox="0 0 27 27" height="16" width="16"><path fill="currentColor" d="M12.74,20.53,3.48,11.35a.75.75,0,0,1,0-1.07L4.71,9.05a.75.75,0,0,1,1.07,0l7.49,7.41,7.49-7.41a.74.74,0,0,1,1.06,0l1.24,1.23a.77.77,0,0,1,0,1.07L13.8,20.53A.74.74,0,0,1,12.74,20.53Z"/></svg></button></div></header><div class="ThreadItemContent_content__Ivb_O"><div class="InsertButtonToCodeBlock_insertButtonWrapper__ueql2"><div class="znc BodyCommentContent_bodyCommentContainer__5up6o"><p>続いて、<code>HooksDispatcherOnUpdate</code> を確認する。<br style=""/>