https://rezact.io/assets/400_Effects-Jr94fKEt.js

1import{M as a}from"./main-Ex-1LHMJ.js";import{m as e}from"./mdx-LEb1kaIk.js";const c=void 0,o=a;function l(s){const t={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...s.components};return e.xCreateElement(e.xFragment,null,e.xCreateElement("div",{class:"mdx max-w-2xl"},e.xCreateElement(t.h1,null,"Effects"),e.xCreateElement(t.h2,null,"Reactive Computations"),e.xCreateElement(t.p,null,"Rezact allows you to derive values from reactive variables. These derived values are themselves reactive and will update whenever their dependencies change."),e.xCreateElement(t.pre,null,e.xCreateElement(t.code,{class:"hljs language-jsx"},e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $count = ",e.xCreateElement(t.span,{class:"hljs-number"},"0"),`;
2`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $doubled = $count * ",e.xCreateElement(t.span,{class:"hljs-number"},"2"),`;
3
4`,e.xCreateElement(t.span,{class:"hljs-comment"},"// ============================================"),`
5
6`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let"),` $todos = [
7  { `,e.xCreateElement(t.span,{class:"hljs-attr"},"$text"),": ",e.xCreateElement(t.span,{class:"hljs-string"},'"Learn Rezact"'),", ",e.xCreateElement(t.span,{class:"hljs-attr"},"$completed"),": ",e.xCreateElement(t.span,{class:"hljs-literal"},"false"),` },
8  { `,e.xCreateElement(t.span,{class:"hljs-attr"},"$text"),": ",e.xCreateElement(t.span,{class:"hljs-string"},'"Build an app"'),", ",e.xCreateElement(t.span,{class:"hljs-attr"},"$completed"),": ",e.xCreateElement(t.span,{class:"hljs-literal"},"true"),` },
9];
10
11`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $filter = ",e.xCreateElement(t.span,{class:"hljs-string"},'"all"'),`;
12`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $filteredTodos = $todos.",e.xCreateElement(t.span,{class:"hljs-title function_"},"filter"),"(",e.xCreateElement(t.span,{class:"hljs-function"},"(",e.xCreateElement(t.span,{class:"hljs-params"},"todo"),") =>"),` {
13  `,e.xCreateElement(t.span,{class:"hljs-keyword"},"if")," ($filter === ",e.xCreateElement(t.span,{class:"hljs-string"},'"all"'),") ",e.xCreateElement(t.span,{class:"hljs-keyword"},"return")," ",e.xCreateElement(t.span,{class:"hljs-literal"},"true"),`;
14  `,e.xCreateElement(t.span,{class:"hljs-keyword"},"if")," ($filter === ",e.xCreateElement(t.span,{class:"hljs-string"},'"completed"'),") ",e.xCreateElement(t.span,{class:"hljs-keyword"},"return")," todo.",e.xCreateElement(t.span,{class:"hljs-property"},"$completed"),`;
15  `,e.xCreateElement(t.span,{class:"hljs-keyword"},"if")," ($filter === ",e.xCreateElement(t.span,{class:"hljs-string"},'"todo"'),") ",e.xCreateElement(t.span,{class:"hljs-keyword"},"return")," !todo.",e.xCreateElement(t.span,{class:"hljs-property"},"$completed"),`;
16});
17`)),e.xCreateElement(t.p,null,"In the example above, $filteredTodos will automatically update whenever $todos changes."),e.xCreateElement(t.h2,null,"Reactive Statements"),e.xCreateElement(t.p,null,"Rezact uses a concise and intuitive way to respond to changes in reactive data: reactive statements. These statements automatically execute whenever the data they depend on changes."),e.xCreateElement(t.p,null,"A reactive statement starts with the ",e.xCreateElement(t.code,null,"$:")," label, followed by the statement you want to execute:"),e.xCreateElement(t.pre,null,e.xCreateElement(t.code,{class:"hljs language-jsx"},e.xCreateElement(t.span,{class:"hljs-attr"},"$"),": ",e.xCreateElement(t.span,{class:"hljs-variable language_"},"console"),".",e.xCreateElement(t.span,{class:"hljs-title function_"},"log"),"(",e.xCreateElement(t.span,{class:"hljs-string"},"`the count is ",e.xCreateElement(t.span,{class:"hljs-subst"},"${count}"),"`"),`);
18
19`,e.xCreateElement(t.span,{class:"hljs-attr"},"$"),`: {
20  `,e.xCreateElement(t.span,{class:"hljs-variable language_"},"console"),".",e.xCreateElement(t.span,{class:"hljs-title function_"},"log"),"(",e.xCreateElement(t.span,{class:"hljs-string"},"`the count is ",e.xCreateElement(t.span,{class:"hljs-subst"},"${count}"),"`"),`);
21  `,e.xCreateElement(t.span,{class:"hljs-variable language_"},"console"),".",e.xCreateElement(t.span,{class:"hljs-title function_"},"log"),"(",e.xCreateElement(t.span,{class:"hljs-string"},"`this will also be logged whenever count changes`"),`);
22}
23
24`,e.xCreateElement(t.span,{class:"hljs-comment"},"// ========================================"),`
25`,e.xCreateElement(t.span,{class:"hljs-comment"},"// hint: this is effectively a useEffect (react) or $effect (svelte 5)"),`
26
27`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $dep1 = ",e.xCreateElement(t.span,{class:"hljs-string"},'"someValue"'),`;
28`,e.xCreateElement(t.span,{class:"hljs-keyword"},"let")," $dep2 = ",e.xCreateElement(t.span,{class:"hljs-string"},'"someValueAgain;"'),`;
29`,e.xCreateElement(t.span,{class:"hljs-attr"},"$"),`: {
30  $dep1;
31  $dep2;
32  `,e.xCreateElement(t.span,{class:"hljs-variable language_"},"console"),".",e.xCreateElement(t.span,{class:"hljs-title function_"},"log"),"(",e.xCreateElement(t.span,{class:"hljs-string"},'"This effect runs whenever $dep1 or $dep2 change"'),`);
33}
34
35$dep1 = `,e.xCreateElement(t.span,{class:"hljs-string"},'"new Dep Value triggers the effect above"'),`;
36`))),`
37`,e.xCreateElement(t.pre,null,e.xCreateElement(t.code)))}function m(s={}){const{wrapper:t}=s.components||{};return t?e.xCreateElement(t,{...s},e.xCreateElement(l,{...s})):l(s)}export{o as Layout,m as default,c as fm};