https://rezact.io/assets/2600_Gotchas-l-1QaWhv.js

1import{M as a}from"./main-Ex-1LHMJ.js";import{m as t}from"./mdx-LEb1kaIk.js";const o=void 0,m=a;function s(n){const e={code:"code",h1:"h1",h3:"h3",hr:"hr",p:"p",pre:"pre",span:"span",...n.components};return t.xCreateElement("div",{class:"mdx max-w-2xl"},t.xCreateElement(e.h1,null,"Gotchas"),t.xCreateElement(e.p,null,`Below is a few gotchas that you may run into when using rezact.
2We are actively working on trying to improve these areas. But for now
3this guide should help you get around some of these issues.`),t.xCreateElement(e.p,null,"Would love to have contributions to the rezact code base to help improve!"),t.xCreateElement(e.hr),t.xCreateElement(e.h3,null,"Mutating Signals directly in JSX"),t.xCreateElement(e.p,null,`Consider the following common example where we are mapping over a list
4and we want to number the list. We can do this by using the `,t.xCreateElement(e.code,null,"{$idx + 1}"),` signal.
5And this will probably work most of the time. But if you try to filter
6the list, you will notice that the numbers don't update in the way would expect.`),t.xCreateElement(e.p,null,`A lot of this has to do with the way rezact handles lists and tries to intelligently
7update the DOM. Like just removing items from the DOM that are no longer needed instead
8of re-rendering the entire list from scratch.`),t.xCreateElement(e.p,null,"This is because the results of the statement ",t.xCreateElement(e.code,null,"{$idx + 1}"),` is not a signal, it is a value.
9So it will only be evaluated once.`),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},`{
10  $filteredTodos.`,t.xCreateElement(e.span,{class:"hljs-title function_"},"map"),"(",t.xCreateElement(e.span,{class:"hljs-function"},"(",t.xCreateElement(e.span,{class:"hljs-params"},"$todo, $idx"),") =>"),` (
11    `,t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">"),`
12      {$idx + 1} - {$todo.$text}
13    `,t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">")),`
14  ));
15}
16`)),t.xCreateElement(e.p,null,`To fix this, we need to make sure that what we pass into our JSX is a Signal.
17In this case we can simply do a reactive computation statement as shown below:`),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},`{
18  $filteredTodos.`,t.xCreateElement(e.span,{class:"hljs-title function_"},"map"),"(",t.xCreateElement(e.span,{class:"hljs-function"},"(",t.xCreateElement(e.span,{class:"hljs-params"},"$todo, $idx"),") =>"),` {
19    `,t.xCreateElement(e.span,{class:"hljs-keyword"},"let")," $idxPlusOne = $idx + ",t.xCreateElement(e.span,{class:"hljs-number"},"1"),`;
20    `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` (
21      `,t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">"),`
22        {$idxPlusOne} - {$todo.$text}
23      `,t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">")),`
24    );
25  });
26}
27`)),t.xCreateElement(e.hr),t.xCreateElement(e.h3,null,"DOM/JSX events (onClick, onSubmit, etc..)"),t.xCreateElement(e.p,null,"Often we reach for writing function expression directly in our JSX like the example below:"),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` (
28  `,t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"button")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"onClick"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{()")," =>"),' $todos.push({ $text: "New Todo" })}>Add Todo',t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"button"),">")),`
29);
30`)),t.xCreateElement(e.p,null,`But you may find buggy or broken behavior when trying to do this.
31This is becuase the rezact compiler is looking for signals in the JSX
32and trying to instrument them properly. So the `,t.xCreateElement(e.code,null,"$todos.push"),` will be recognized
33by the compiler and potentially modified. We can fix this by moving the function
34expression outside of the JSX like so:`),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},`{
35  `,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"addTodo")," = (",t.xCreateElement(e.span,{class:"hljs-params"}),") => $todos.",t.xCreateElement(e.span,{class:"hljs-title function_"},"push"),"({ ",t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"New Todo"'),` });
36  ...
37  `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return")," ",t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"button")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"onClick"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{addTodo}"),">"),"Add Todo",t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"button"),">")),`;
38}
39`)),t.xCreateElement(e.hr),t.xCreateElement(e.h3,null,"Signal Object dot notation"),t.xCreateElement(e.p,null,`Many times when create Maps and Signals or Objects with reactive properties the compiler
40may make mistakes and not instrument the code properly. This is currently a known issue.
41The workaround in most cases is to extract the property using destructuring.`),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," todo = { ",t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"New Todo"'),` };
42`,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," $text = todo.",t.xCreateElement(e.span,{class:"hljs-property"},"$text"),"; ",t.xCreateElement(e.span,{class:"hljs-comment"},"// This may not work"),`
43`,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," { $text } = todo; ",t.xCreateElement(e.span,{class:"hljs-comment"},"// This will work"),`
44`)),t.xCreateElement(e.hr),t.xCreateElement(e.h3,null,"Passing Signals around and getting the value when you need it"),t.xCreateElement(e.p,null,`In rezact passing a signal around is easy. But sometimes you may want to pass the value
45of the signal around instead of the signal itself. The example below shows a common
46mistake that you may run into and how to fix it.`),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-tsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { getVal } ",t.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",t.xCreateElement(e.span,{class:"hljs-string"},'"@rezact/rezact/signals"'),`;
47
48`,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," $num = ",t.xCreateElement(e.span,{class:"hljs-number"},"5"),`;
49
50`,t.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),"(",t.xCreateElement(e.span,{class:"hljs-params"},"num: ",t.xCreateElement(e.span,{class:"hljs-built_in"},"number")),`) {
51  `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return")," num + ",t.xCreateElement(e.span,{class:"hljs-number"},"1"),`;
52}
53
54`,t.xCreateElement(e.span,{class:"hljs-comment"},"// this will not work becuase $num is a signal"),`
55`,t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),`($num);
56
57`,t.xCreateElement(e.span,{class:"hljs-comment"},"// this will work"),`
58`,t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),"(",t.xCreateElement(e.span,{class:"hljs-title function_"},"getVal"),`($num));
59`)),t.xCreateElement(e.p,null,"Of course if the function is expecting a signal, then you can just pass the signal directly."),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-tsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," $num = ",t.xCreateElement(e.span,{class:"hljs-number"},"5"),`;
60
61`,t.xCreateElement(e.span,{class:"hljs-comment"},"// still need to use number type here as"),`
62`,t.xCreateElement(e.span,{class:"hljs-comment"},"// typescript will complain otherwise"),`
63`,t.xCreateElement(e.span,{class:"hljs-comment"},"// the key difference here is that we"),`
64`,t.xCreateElement(e.span,{class:"hljs-comment"},"// have prefixed the argument with a $ sign"),`
65`,t.xCreateElement(e.span,{class:"hljs-comment"},"// the rezact compiler will recognize this"),`
66`,t.xCreateElement(e.span,{class:"hljs-comment"},"// and instrument the code properly"),`
67`,t.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),"(",t.xCreateElement(e.span,{class:"hljs-params"},"$num: ",t.xCreateElement(e.span,{class:"hljs-built_in"},"number")),`) {
68  `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return")," $num + ",t.xCreateElement(e.span,{class:"hljs-number"},"1"),`;
69}
70
71`,t.xCreateElement(e.span,{class:"hljs-comment"},"// this will work"),`
72`,t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),`($num);
73
74`,t.xCreateElement(e.span,{class:"hljs-comment"},"// this will not work"),`
75`,t.xCreateElement(e.span,{class:"hljs-title function_"},"addOne"),"(",t.xCreateElement(e.span,{class:"hljs-title function_"},"getVal"),`($num));
76`)))}function i(n={}){const{wrapper:e}=n.components||{};return e?t.xCreateElement(e,{...n},t.xCreateElement(s,{...n})):s(n)}export{m as Layout,i as default,o as fm};