Closed 2023/07/10にクローズ 32

useSyncExternalStoreのdocsを読む

これです
</span><a href="https://react.dev/reference/react/useSyncExternalStore" style="" target="_blank" rel="nofollow noopener noreferrer">https://react.dev/reference/react/useSyncExternalStore</a></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>2</span></button></footer></div><div class="ThreadItemContent_children__xggXO"><article class="ThreadItemContent_childItem__TC_O8" id="comment-3de462e2ed42ef"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-3de462e2ed42ef"><time aria-label="2023年7月9日 8時10分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:10:25+00:00" role="tooltip">2023/07/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"><blockquote> <p>useSyncExternalStore is a React Hook that lets you subscribe to an external store.</p> <p>名前の通りって感じ</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-d7165c02270451"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-d7165c02270451"><time aria-label="2023年7月9日 8時10分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:10:38+00:00" role="tooltip">2023/07/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>useEffectの一種って感じでもないのか？</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></footer></div></article><div class="ThreadItemContent_addReplyContainer__cV93C"><button class="ThreadItemContent_addReplyButton__2Y8xI">返信を追加</button></div></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-88424bdae48c07"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-88424bdae48c07"><time aria-label="2023年7月9日 8時13分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:13:35+00:00" role="tooltip">2023/07/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"><h1 id="refference"> <a class="header-anchor-link" href="#refference" aria-hidden="true"/> Refference</h1> <div class="code-block-container"><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> useSyncExternalStore <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> todosStore <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'./todoStore.js'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">TodosApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> todos <span class="token operator">=</span> <span class="token function">useSyncExternalStore</span><span class="token punctuation">(</span>todosStore<span class="token punctuation">.</span><span class="token property-access">subscribe</span><span class="token punctuation">,</span> todosStore<span class="token punctuation">.</span><span class="token property-access">getSnapshot</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ...</span> <li>The subscribe function should subscribe to the store and return a function that unsubscribes.</li> <li>The getSnapshot function should read a snapshot of the data from the store.</li> </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>14</span></button></footer></div><div class="ThreadItemContent_children__xggXO"><article class="ThreadItemContent_childItem__TC_O8" id="comment-fcdbbc6240d387"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-fcdbbc6240d387"><time aria-label="2023年7月9日 8時18分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:18:44+00:00" role="tooltip">2023/07/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>わかるようでわからんからソース見に行こうと思ったんやけども、どこ？<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__b85584a0fcc7b" src="https://embed.zenn.studio/github#zenn-embedded__b85584a0fcc7b" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStore.js%23L16" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStore.js#L16" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStore.js#L16</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-f0592e7fc1fb3e"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-f0592e7fc1fb3e"><time aria-label="2023年7月9日 8時20分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:20:20+00:00" role="tooltip">2023/07/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>実態がつかめない<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__9f30645ac5f58" src="https://embed.zenn.studio/github#zenn-embedded__9f30645ac5f58" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Freact%2Fsrc%2FReactHooks.js%23L194-L205" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactHooks.js#L194-L205" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactHooks.js#L194-L205</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-43644b29af4a0e"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-43644b29af4a0e"><time aria-label="2023年7月9日 8時23分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:23:02+00:00" role="tooltip">2023/07/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>resolveDispatcherてやつがこれで<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__2794c4b26b349" src="https://embed.zenn.studio/github#zenn-embedded__2794c4b26b349" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Freact%2Fsrc%2FReactHooks.js%23L23-L41" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactHooks.js#L23-L41" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactHooks.js#L23-L41</a></p> <p>ReactCurrentDispatcherがこんなObjectなので、どっかで別のところで入れてるな<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__36c1175fc1ed2" src="https://embed.zenn.studio/github#zenn-embedded__36c1175fc1ed2" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Freact%2Fsrc%2FReactCurrentDispatcher.js" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactCurrentDispatcher.js" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/react/src/ReactCurrentDispatcher.js</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-ce02f590d8e7c9"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-ce02f590d8e7c9"><time aria-label="2023年7月9日 8時29分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:29:59+00:00" role="tooltip">2023/07/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>あーでもわりと実態こいつなのかもしれん<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__bb9a4cfeba1f7" src="https://embed.zenn.studio/github#zenn-embedded__bb9a4cfeba1f7" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStoreShimClient.js" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-bd13ee96368b91"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-bd13ee96368b91"><time aria-label="2023年7月9日 8時37分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:37:15+00:00" role="tooltip">2023/07/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><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__d402d32bf3f9f" src="https://embed.zenn.studio/github#zenn-embedded__d402d32bf3f9f" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStoreShimClient.js%23L53-L57" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L53-L57" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L53-L57</a></p> <p>”this breaks the rules of React”が印象的、やっぱりそうよね</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-b06fde4e24db28"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-b06fde4e24db28"><time aria-label="2023年7月9日 8時46分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:46:01+00:00" role="tooltip">2023/07/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>それっぽいのは基本ここだな。valueとgetSnapshotで新しいやつが入ってきたらre-renderしている<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__d75a626ab8ca4" src="https://embed.zenn.studio/github#zenn-embedded__d75a626ab8ca4" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStoreShimClient.js%23L86-L101" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L86-L101" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L86-L101</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-db19d8de3041a1"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-db19d8de3041a1"><time aria-label="2023年7月9日 8時46分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:46:53+00:00" role="tooltip">2023/07/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>なんでLayoutEffectなんかはよくわからん。"This needs to be updated in the layout phase"とコメントは書いてあるけど、なんで？</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-bd701b378be7eb"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-bd701b378be7eb"><time aria-label="2023年7月9日 8時48分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:48:54+00:00" role="tooltip">2023/07/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>ほんでその直後にuseEffectも書いてあって、たぶんこっちは単純にsucscribeをやっている。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__8e1416fb4d79e" src="https://embed.zenn.studio/github#zenn-embedded__8e1416fb4d79e" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStoreShimClient.js%23L103-L125" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L103-L125" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L103-L125</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-4c94a43459ccd1"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-4c94a43459ccd1"><time aria-label="2023年7月9日 8時50分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:50:15+00:00" role="tooltip">2023/07/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>subscribe(handleStoreChange);</code>を見るに、subscribe側でもcallbackを呼べばre-renderできるってことだよね？それをやるタイミングはよくわかってないけれども。</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-fd6948635ab91c"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-fd6948635ab91c"><time aria-label="2023年7月9日 8時52分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-08T23:52:10+00:00" role="tooltip">2023/07/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><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__de178dafa03e8" src="https://embed.zenn.studio/github#zenn-embedded__de178dafa03e8" data-content="https%3A%2F%2Fgithub.com%2Ffacebook%2Freact%2Fblob%2Ffdc8c81e07e9b3b49604afe524ee6d130fd3e03e%2Fpackages%2Fuse-sync-external-store%2Fsrc%2FuseSyncExternalStoreShimClient.js%23L127" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L127" style="" target="_blank" rel="nofollow noopener noreferrer">https://github.com/facebook/react/blob/fdc8c81e07e9b3b49604afe524ee6d130fd3e03e/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L127</a><br style=""/> <code>useDebugValue</code>なるしらんHookも使われている。なんか、loggingっぽい。<br style=""/> <span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__64e1e8c633787" src="https://embed.zenn.studio/card#zenn-embedded__64e1e8c633787" data-content="https%3A%2F%2Freact.dev%2Freference%2Freact%2FuseDebugValue" frameborder="0" scrolling="no" loading="lazy"/></span><a href="https://react.dev/reference/react/useDebugValue" style="" target="_blank" rel="nofollow noopener noreferrer">https://react.dev/reference/react/useDebugValue</a></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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-e249d0d7fd5bbc"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-e249d0d7fd5bbc"><time aria-label="2023年7月10日 7時58分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T22:58:47+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>When the store changes, it should invoke the provided callback. This will cause the component to re-render.</p> <p>callbackによりre-renderっておもっきし書いてあったわ</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-54d9b6eaee5ba7"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-54d9b6eaee5ba7"><time aria-label="2023年7月10日 7時59分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T22:59:58+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>While the store has not changed, repeated calls to getSnapshot must return the same value. If the store changes and the returned value is different (as compared by Object.is), React re-renders the component.</p> <p>storeの更新を検知するための機能ということがよくわかる</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-eaec4221a289f0"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-eaec4221a289f0"><time aria-label="2023年7月10日 8時1分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:01:26+00:00" role="tooltip">2023/07/10</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"><h2 id="returns"> <a class="header-anchor-link" href="#returns" aria-hidden="true"/> Returns</h2> <p>The current snapshot of the store which you can use in your rendering logic.</p> <p>snapshotが帰ってきますよと。だからuseAtomValueみたいなんに近い。storeの更新関数はこの関数の外側にある。</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-478d39630e0f25"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-478d39630e0f25"><time aria-label="2023年7月10日 8時3分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:03:24+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>The store snapshot returned by getSnapshot must be immutable.</p> <p>そうですね。</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></footer></div></article><div class="ThreadItemContent_addReplyContainer__cV93C"><button class="ThreadItemContent_addReplyButton__2Y8xI">返信を追加</button></div></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-5d0cb4563a14ce"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-5d0cb4563a14ce"><time aria-label="2023年7月10日 8時8分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:08:44+00:00" role="tooltip">2023/07/10</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"><h1 id="usage"> <a class="header-anchor-link" href="#usage" aria-hidden="true"/> Usage</h1> <p>いつ使いたくなるのか気になる。</p> <p>毎度思うけど、この色付きの説明わかりやすすぎる。<br/> </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>8</span></button></footer></div><div class="ThreadItemContent_children__xggXO"><article class="ThreadItemContent_childItem__TC_O8" id="comment-f74bb4e3cf0d4e"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-f74bb4e3cf0d4e"><time aria-label="2023年7月10日 8時9分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:09:17+00:00" role="tooltip">2023/07/10</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>todoStoreはこんな感じらしい。まあわかるっちゃわかる。</p> <div class="code-block-container"><pre class="language-ts"><code class="language-ts"><span class="token keyword">let</span> nextId <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">let</span> todos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> id<span class="token operator">:</span> nextId<span class="token operator">++</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Todo #1'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> listeners <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> todosStore <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">addTodo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> todos <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>todos<span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> nextId<span class="token operator">++</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'Todo #'</span> <span class="token operator">+</span> nextId <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token function">emitChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">subscribe</span><span class="token punctuation">(</span>listener<span class="token punctuation">)</span> <span class="token punctuation">{</span> listeners <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>listeners<span class="token punctuation">,</span> listener<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> listeners <span class="token operator">=</span> listeners<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>l <span class="token operator">=&gt;</span> l <span class="token operator">!==</span> listener<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">getSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> todos<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">emitChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> listener <span class="token keyword">of</span> listeners<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">listener</span><span class="token punctuation">(</span><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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-fbfd574bd2c444"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-fbfd574bd2c444"><time aria-label="2023年7月10日 8時10分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:10:11+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>When possible, we recommend using built-in React state with useState and useReducer instead. The useSyncExternalStore API is mostly useful if you need to integrate with existing non-React code.</p> <p>大事なことかいてあった。「使えるなら普通にReactの機能使え。既存のコードを統合するのがつらい時だけこっち」って感じね。</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-c53a28780be120"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-c53a28780be120"><time aria-label="2023年7月10日 8時11分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:11:47+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>Another reason to add useSyncExternalStore is when you want to subscribe to some value exposed by the browser that changes over time. For example, suppose that you want your component to display whether the network connection is active. The browser exposes this information via a property called navigator.onLine.</p> <p>This value can change without React’s knowledge, so you should read it with useSyncExternalStore.</p> <p>なるほど、たしかにこの例は見たことがあったかもしれない。change overtime な browser API経由の値。</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-c7b5ee4b147589"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-c7b5ee4b147589"><time aria-label="2023年7月10日 8時13分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:13:53+00:00" role="tooltip">2023/07/10</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"><div class="code-block-container"><pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> useSyncExternalStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">useOnlineStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> isOnline <span class="token operator">=</span> <span class="token function">useSyncExternalStore</span><span class="token punctuation">(</span>subscribe<span class="token punctuation">,</span> getSnapshot<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> isOnline<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">getSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> navigator<span class="token punctuation">.</span>onLine<span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">subscribe</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">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> window<span class="token punctuation">.</span><span class="token function">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">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">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> window<span class="token punctuation">.</span><span class="token function">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><p>なるほどですねえ</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-259926d314966e"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-259926d314966e"><time aria-label="2023年7月10日 8時15分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:15:10+00:00" role="tooltip">2023/07/10</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>↑だとserver renderingのときに困るから、こいつを追加する</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">getServerSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// Always show "Online" for server-generated HTML</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-d59a230182e80b"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-d59a230182e80b"><time aria-label="2023年7月10日 8時16分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:16:15+00:00" role="tooltip">2023/07/10</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>getServerSnapshot</code>が呼び出されるのは次の2点のみ</p> <li>It runs on the server when generating the HTML.</li> <li>It runs on the client during hydration, i.e. when React takes the server HTML and makes it interactive.</li> </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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-e7ad360a557714"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-e7ad360a557714"><time aria-label="2023年7月10日 8時17分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:17:03+00:00" role="tooltip">2023/07/10</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>↑serverで適当な値返すのがアレだったら、client renderingを強制しろとのこと</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-7e7b576f92e686"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-7e7b576f92e686"><time aria-label="2023年7月10日 8時18分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:18:55+00:00" role="tooltip">2023/07/10</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"><blockquote> <p>Make sure that getServerSnapshot returns the same exact data on the initial client render as it returned on the server. For example, if getServerSnapshot returned some prepopulated store content on the server, you need to transfer this content to the client. One way to do this is to emit a &lt;script&gt; tag during server rendering that sets a global like window.MY_STORE_DATA, and read from that global on the client in getServerSnapshot. Your external store should provide instructions on how to do that.</p> <p>これはあれだね、最近のDeep diveに書いてあったね。initial JSXをClientに送りつけとくやつ。</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></footer></div></article><div class="ThreadItemContent_addReplyContainer__cV93C"><button class="ThreadItemContent_addReplyButton__2Y8xI">返信を追加</button></div></div></article></div><div class="ScrapThread_item__zTzyN"><article class="ThreadItemContent_parentItem__2BweX" id="comment-cc1b76341a0738"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-cc1b76341a0738"><time aria-label="2023年7月10日 8時21分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:21:21+00:00" role="tooltip">2023/07/10に更新</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"><h1 id="troubleshooting"> <a class="header-anchor-link" href="#troubleshooting" aria-hidden="true"/> Troubleshooting</h1> <p>getSnapshotで新規Objectを返すと、storeが更新されなくてもsnapshot取得のたびに変わってくるのでだめ</p> <p>React will re-render the component if getSnapshot return value is different from the last time.</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">getSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 🔴 Do not return always different objects from getSnapshot</span> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">todos</span><span class="token operator">:</span> myStore<span class="token punctuation">.</span><span class="token property-access">todos</span> <p>Your getSnapshot object should only return a different object if something has actually changed. If your store contains immutable data, you can return that data directly:</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">getSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ✅ You can return immutable data</span> <span class="token keyword control-flow">return</span> myStore<span class="token punctuation">.</span><span class="token property-access">todos</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>3</span></button></footer></div><div class="ThreadItemContent_children__xggXO"><article class="ThreadItemContent_childItem__TC_O8" id="comment-12d17c86d3463e"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-12d17c86d3463e"><time aria-label="2023年7月10日 8時24分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:24:14+00:00" role="tooltip">2023/07/10に更新</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>同様にsubscribe functionをcomponent内部で定義するのもだめ</p> <div class="code-block-container"><pre class="language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ChatIndicator</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> isOnline <span class="token operator">=</span> <span class="token function">useSyncExternalStore</span><span class="token punctuation">(</span>subscribe<span class="token punctuation">,</span> getSnapshot<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 🚩 Always a different function, so React will resubscribe on every re-render</span> <span class="token keyword">function</span> <span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token comment">// ...</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-88ddc494ef92e8"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-88ddc494ef92e8"><time aria-label="2023年7月10日 8時25分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-09T23:25:39+00:00" role="tooltip">2023/07/10</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>外側に定義するか、最悪useCallbackで囲っておく。</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></footer></div></article><article class="ThreadItemContent_childItem__TC_O8" id="comment-a9fc961fb794d2"><header class="ThreadHeader_header__rscC4"><a class="ThreadHeader_userAvatar__zumMm ThreadItemContent_avatarContainer__xS_s_" href="/ikenohi"><img alt="hajimism" class="AvatarImage_plain__Fgp4R " height="36" loading="lazy" referrerpolicy="no-referrer" src="https://res.cloudinary.com/zenn/image/fetch/s--gMl8ycZu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/9b64296a3a.jpeg" width="36"/></a><a class="ThreadHeader_userName__TmgaQ" href="/ikenohi">hajimism</a><a class="ThreadHeader_dateContainer__349dg" href="#comment-a9fc961fb794d2"><time aria-label="2023年7月10日 9時28分" data-tooltip-for-desktop="true" data-tooltip-position="top" datetime="2023-07-10T00:28:51+00:00" role="tooltip">2023/07/10</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>一応Playgroundにもメモった<br style=""/>