Deploying to gh-pages from @ 7181b47 🚀

learn/0.4/guide/state/index.html

@@ -127,7 +127,7 @@
 </span><span style="color:#f8f8f2;">        }
 </span><span style="color:#f8f8f2;">    }
 </span><span style="color:#f8f8f2;">}</span></pre>
-</div></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo" style="max-height:50vh;" data-node-hydration="559"><div style="display:flex;flex-direction:row;width:100%;" data-node-hydration="560"><div style="width:50%;"><div style="padding:0.5rem;position:relative;" data-node-hydration="561"><div style="font-size:1.5rem;"><a href="" data-node-hydration="562"><!--node-id563-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;" data-node-hydration="564"><!--node-id565--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--node-id566-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--node-id567-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--node-id568-->01/03/25 12:32 AM<!--#--></div><div style="padding-left:0.5rem;"><!--node-id569-->0  comments<!--#--></div></div></div></div><div style="width:50%;"><!--node-id570-->Hover over a story to preview it here<!--#--></div></div></div><h2 id="event-handlers" data-node-hydration="571"><a href="#event-handlers" class="header">Event Handlers</a></h2><p data-node-hydration="572">Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p data-node-hydration="573">Event handlers are similar to regular attributes, but their name usually starts with  <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p data-node-hydration="574">Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the <code>StoryListing</code> component:</p><div class="border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8" data-node-hydration="575"><div class="w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack"><div class="font-mono"><!--node-id576-->src/hackernews_state.rs<!--#--></div><button class="hover:text-blue-600 flex flex-row items-center gap-1 " onclick="navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);" data-node-hydration="577,click:1"><!--placeholder578--><span><svg width="24" height="24" stroke-width="1.5" fill="none" stroke="currentColor" data-node-hydration="579"><path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8"></path></svg></span></button></div><div class="codeblock" data-node-hydration="580"><pre style="background-color:#0d0d0d;">
+</div></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo" style="max-height:50vh;" data-node-hydration="559"><div style="display:flex;flex-direction:row;width:100%;" data-node-hydration="560"><div style="width:50%;"><div style="padding:0.5rem;position:relative;" data-node-hydration="561"><div style="font-size:1.5rem;"><a href="" data-node-hydration="562"><!--node-id563-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;" data-node-hydration="564"><!--node-id565--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--node-id566-->0  points<!--#--></div><div style="padding-left:0.5rem;"><!--node-id567-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--node-id568-->01/07/25  1:53 PM<!--#--></div><div style="padding-left:0.5rem;"><!--node-id569-->0  comments<!--#--></div></div></div></div><div style="width:50%;"><!--node-id570-->Hover over a story to preview it here<!--#--></div></div></div><h2 id="event-handlers" data-node-hydration="571"><a href="#event-handlers" class="header">Event Handlers</a></h2><p data-node-hydration="572">Next, we need to detect when the user hovers over a section or focuses a link. We can use an <a href="../reference/event_handlers">event listener</a> to listen for the hover and focus events.</p><p data-node-hydration="573">Event handlers are similar to regular attributes, but their name usually starts with  <code>on</code>- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the <a href="https://docs.rs/dioxus/latest/dioxus/prelude/struct.Event.html">Event</a> structure.</p><p data-node-hydration="574">Let&#x27;s create a <a href="https://docs.rs/dioxus/latest/dioxus/events/fn.onmouseenter.html"><code>onmouseenter</code></a> event listener in the <code>StoryListing</code> component:</p><div class="border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8" data-node-hydration="575"><div class="w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack"><div class="font-mono"><!--node-id576-->src/hackernews_state.rs<!--#--></div><button class="hover:text-blue-600 flex flex-row items-center gap-1 " onclick="navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);" data-node-hydration="577,click:1"><!--placeholder578--><span><svg width="24" height="24" stroke-width="1.5" fill="none" stroke="currentColor" data-node-hydration="579"><path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8"></path></svg></span></button></div><div class="codeblock" data-node-hydration="580"><pre style="background-color:#0d0d0d;">
 <span style="color:#f8f8f2;">cx.</span><span style="color:#66d9ef;">render</span><span style="color:#f8f8f2;">(rsx! {
 </span><span style="color:#f8f8f2;">    div {
 </span><span style="color:#f8f8f2;">        padding: </span><span style="color:#ffee99;">&quot;0.5rem&quot;</span><span style="color:#f8f8f2;">,
@@ -239,7 +239,7 @@
 </span><span style="color:#f8f8f2;">
 </span><span style="color:#f8f8f2;">    </span><span style="color:#8c8c8c;">// New
 </span><span style="color:#f8f8f2;">    </span><span style="color:#f92672;">match &amp;*</span><span style="color:#f8f8f2;">preview_state.</span><span style="color:#66d9ef;">read</span><span style="color:#f8f8f2;">() {</span></pre>
-</div></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo" style="max-height:50vh;" data-node-hydration="606"><div style="display:flex;flex-direction:row;width:100%;" data-node-hydration="607"><div style="width:50%;"><div style="padding:0.5rem;position:relative;" data-node-hydration="608,mouseenter:0"><div style="font-size:1.5rem;"><a href="" data-node-hydration="609,focus:0"><!--node-id610-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;" data-node-hydration="611"><!--node-id612--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--node-id613-->0 point<!--#--></div><div style="padding-left:0.5rem;"><!--node-id614-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--node-id615-->01/03/25 12:32 AM<!--#--></div><div style="padding-left:0.5rem;"><!--node-id616-->0  comments<!--#--></div></div></div></div><div style="width:50%;"><!--node-id617-->Hover over a story to preview it here<!--#--></div></div></div><blockquote data-node-hydration="618"><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks" data-node-hydration="619"><a href="#the-rules-of-hooks" class="header">The Rules of Hooks</a></h3><p data-node-hydration="620">Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol data-node-hydration="621"><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with <code>use_</code> so you don&#x27;t accidentally confuse them with regular functions</li></ol><p data-node-hydration="622">These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals" data-node-hydration="623"><a href="#no-hooks-in-conditionals" class="header">No Hooks in Conditionals</a></h4><div class="border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8" data-node-hydration="624"><div class="w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack"><div class="font-mono"><!--node-id625-->src/hooks_bad.rs<!--#--></div><button class="hover:text-blue-600 flex flex-row items-center gap-1 " onclick="navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);" data-node-hydration="626,click:1"><!--placeholder627--><span><svg width="24" height="24" stroke-width="1.5" fill="none" stroke="currentColor" data-node-hydration="628"><path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8"></path></svg></span></button></div><div class="codeblock" data-node-hydration="629"><pre style="background-color:#0d0d0d;">
+</div></div><div class="bg-white rounded-md shadow-md p-4 my-4 overflow-auto text-black dioxus-demo" style="max-height:50vh;" data-node-hydration="606"><div style="display:flex;flex-direction:row;width:100%;" data-node-hydration="607"><div style="width:50%;"><div style="padding:0.5rem;position:relative;" data-node-hydration="608,mouseenter:0"><div style="font-size:1.5rem;"><a href="" data-node-hydration="609,focus:0"><!--node-id610-->hello hackernews<!--#--></a><a href="https://news.ycombinator.com/from?site=" style="color:gray;text-decoration:none;" data-node-hydration="611"><!--node-id612--> ()<!--#--></a></div><div style="display:flex;flex-direction:row;color:gray;"><div><!--node-id613-->0 point<!--#--></div><div style="padding-left:0.5rem;"><!--node-id614-->by Author<!--#--></div><div style="padding-left:0.5rem;"><!--node-id615-->01/07/25  1:53 PM<!--#--></div><div style="padding-left:0.5rem;"><!--node-id616-->0  comments<!--#--></div></div></div></div><div style="width:50%;"><!--node-id617-->Hover over a story to preview it here<!--#--></div></div></div><blockquote data-node-hydration="618"><p>You can read more about Hooks in the <a href="../reference/hooks">Hooks reference</a></p></blockquote><h3 id="the-rules-of-hooks" data-node-hydration="619"><a href="#the-rules-of-hooks" class="header">The Rules of Hooks</a></h3><p data-node-hydration="620">Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:</p><ol data-node-hydration="621"><li>Hooks may be only used in components or other hooks (we&#x27;ll get to that later)</li><li>On every call to the component function<ol><li>The same hooks must be called</li><li>In the same order</li></ol></li><li>Hooks name&#x27;s should start with <code>use_</code> so you don&#x27;t accidentally confuse them with regular functions</li></ol><p data-node-hydration="622">These rules mean that there are certain things you can&#x27;t do with hooks:</p><h4 id="no-hooks-in-conditionals" data-node-hydration="623"><a href="#no-hooks-in-conditionals" class="header">No Hooks in Conditionals</a></h4><div class="border overflow-hidden rounded-md border-gray-300 dark:border-gray-700 mb-8" data-node-hydration="624"><div class="w-full bg-red flex flex-row justify-between border-b border-gray-300 dark:border-gray-700 py-1 px-2 text-xs items-center bg-gray-100 dark:bg-ideblack"><div class="font-mono"><!--node-id625-->src/hooks_bad.rs<!--#--></div><button class="hover:text-blue-600 flex flex-row items-center gap-1 " onclick="navigator.clipboard.writeText(this.parentNode.parentNode.lastChild.innerText);" data-node-hydration="626,click:1"><!--placeholder627--><span><svg width="24" height="24" stroke-width="1.5" fill="none" stroke="currentColor" data-node-hydration="628"><path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8"></path></svg></span></button></div><div class="codeblock" data-node-hydration="629"><pre style="background-color:#0d0d0d;">
 <span style="color:#8c8c8c;">// ❌ don&#39;t call hooks in conditionals!
 </span><span style="color:#8c8c8c;">// We must ensure that the same hooks will be called every time
 </span><span style="color:#8c8c8c;">// But `if` statements only run if the conditional is true!