Count: {count()}{" "} {/* Only `count()` is updated when the button is clicked. */}
);}',get children(){return n(e.div,{})}})}})]}})]}}),`
`,n(e.p,{get children(){return["This ",n(e.code,{children:"Counter"})," function sets up a button that, when clicked, calls the ",n(e.code,{children:"increment"})," function to increase the ",n(e.code,{children:"count"}),` by one.
This updates just the number displayed `,n(e.em,{children:"without"})," refreshing the entire component."]}}),`
`,n(t,{href:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=cry9JT4nroFQ4rRxzOpvCg",preview:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=cry9JT4nroFQ4rRxzOpvCg&type=embed"}),`
`,n(e.h2,{id:"reactive-principles",get children(){return n(e.a,{className:"heading",href:"#reactive-principles",children:"Reactive principles"})}}),`
`,n(e.h3,{id:"signals",get children(){return n(e.a,{className:"heading",href:"#signals",children:"Signals"})}}),`
`,n(e.p,{children:`Signals serve as core elements in reactive systems, playing an important role in data management and system responsiveness.
They are responsible for storing and managing data, as well as triggering updates across the system.
This is done through the use of getters and setters.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ^ getter ^ setter"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const [count, setCount] = createSignal(0);// ^ getter ^ setter",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(t,{href:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=lseAEjGlKLslaVsTlfej_g",preview:"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=lseAEjGlKLslaVsTlfej_g&type=embed"}),`
`,n(e.ul,{get children(){return[`
`,n(e.li,{get children(){return[`
`,n(e.p,{get children(){return[n(e.strong,{children:"Getter"}),`: A function responsible for accessing the current value of the signal.
You call a getter to access the data stored in a signal within a component.`]}}),`
`]}}),`
`,n(e.li,{get children(){return[`
`,n(e.p,{get children(){return[n(e.strong,{children:"Setter"}),`:
The function used to modify a signal's value.
To trigger reactive updates across an application, you call a setter to update the value of a signal.`]}}),`
`]}}),`
`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// `count()` is a getter that returns the current value of `count`, which is `0`."})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// the setter, `setCount`, updates the value of `count`."})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// the updated value of `count` is now `1`."})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"console.log(count()); // `count()` is a getter that returns the current value of `count`, which is `0`.setCount(1); // the setter, `setCount`, updates the value of `count`.console.log(count()); // the updated value of `count` is now `1`.",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"subscribers",get children(){return n(e.a,{className:"heading",href:"#subscribers",children:"Subscribers"})}}),`
`,n(e.p,{children:`Subscribers are the other core element in reactive systems.
They are responsible for tracking changes in signals and updating the system accordingly.
They are automated responders that keep the system up-to-date with the latest data changes.`}),`
`,n(e.p,{children:"Subscribers work based on two main actions:"}),`
`,n(e.ul,{get children(){return[`
`,n(e.li,{get children(){return[n(e.strong,{children:"Observation"}),`: At their core, subscribers observe signals.
This keeps the subscriber primed to pick up on any changes to the signal they are tracking.`]}}),`
`,n(e.li,{get children(){return[n(e.strong,{children:"Response"}),`: When a signal changes, the subscriber is notified.
This triggers the subscriber to respond to the change in the signal.
This can involve tasks like updating the UI or calling external functions.`]}}),`
`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createEffect"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// the `createEffect` will trigger the console log every time `count` changes."})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"function Counter() { const [count, setCount] = createSignal(0); const increment = () => setCount((prev) => prev + 1); createEffect(() => { console.log(count()); }); // the `createEffect` will trigger the console log every time `count` changes.}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"state-management",get children(){return n(e.a,{className:"heading",href:"#state-management",children:"State management"})}}),`
`,n(e.p,{children:`State management is the process of managing the state of an application.
This involves storing and updating data, as well as responding to the changes in it.`}),`
`,n(e.p,{children:`With Solid, state management is handled through signals and subscribers.
Signals are used to store and update data, while subscribers are used to respond to changes in the data.`}),`
`,n(e.h3,{id:"tracking-changes",get children(){return n(e.a,{className:"heading",href:"#tracking-changes",children:"Tracking changes"})}}),`
`,n(e.p,{children:`Tracking changes involves monitoring any updates to the data and responding accordingly.
This is done through the use of subscribers.`}),`
`,n(e.p,{children:`When a signal is not accessed within a tracking scope, an update to the signal will not trigger an update.
This happens because if a signal is not being tracked, it is not able to notify any subscribers of the change.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Count:"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Output: Count: 0"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// `count` is not being tracked, so the console log will not update when `count` changes."})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'const [count, setCount] = createSignal(0);console.log("Count:", count());setCount(1);// Output: Count: 0// `count` is not being tracked, so the console log will not update when `count` changes.',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["Since initialization is a ",n(e.strong,{children:"one-time event"}),", if a signal is accessed ",n(e.em,{children:"outside of a tracking scope"}),`, it will not be tracked.
To track a signal, it must be accessed within the scope of a subscriber.
Reactive primitives, such as `,n(e.a,{href:"/concepts/effects",children:"effects"}),", can be used to create subscribers."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createEffect"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Count:"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Output: Count: 0"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Count: 1"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'const [count, setCount] = createSignal(0);createEffect(() => { console.log("Count:", count());});setCount(1);// Output: Count: 0// Count: 1',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h3,{id:"updating-the-ui",get children(){return n(e.a,{className:"heading",href:"#updating-the-ui",children:"Updating the UI"})}}),`
`,n(e.p,{get children(){return["The UI of a Solid application is built using ",n(e.a,{href:"/concepts/understanding-jsx",children:"JSX"}),`.
JSX creates a tracking scope behind the scenes, which allows signals to be tracked within the return statement of a component.`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"span"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}{"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* ✅ will update when `count()` changes. */"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"type"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"button"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'function Counter() { const [count, setCount] = createSignal(0); const increment = () => setCount((prev) => prev + 1); return (
Count: {count()}{" "} {/* ✅ will update when `count()` changes. */}
);}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["Components, much like other functions, will only run ",n(e.em,{children:"once"}),`.
This means that if a signal is accessed outside of the return statement, it will run on initialization, but any updates to the signal will not trigger an update.`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Count:"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ❌ not tracked - only runs once during initialization."})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createEffect"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"log"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"())"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// ✅ will update whenever `count()` changes."})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"span"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}{"}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"/* ✅ will update whenever `count()` changes. */"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"type"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"button"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'function Counter() { const [count, setCount] = createSignal(0); const increment = () => setCount((prev) => prev + 1); console.log("Count:", count()); // ❌ not tracked - only runs once during initialization. createEffect(() => { console.log(count()); // ✅ will update whenever `count()` changes. }); return (
);}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["To learn more about managing state in Solid, visit the ",n(e.a,{href:"/guides/state-management",children:"guide on state management"}),"."]}}),`
`,n(e.h2,{id:"synchronous-vs-asynchronous",get children(){return n(e.a,{className:"heading",href:"#synchronous-vs-asynchronous",children:"Synchronous vs. asynchronous"})}}),`
`,n(e.p,{children:`Reactive systems are designed to respond to changes in data.
These responses can be immediate or delayed, depending on the nature of the system.
Often, the choice between these two depends on the requirements of the application and the nature of the tasks involved.`}),`
`,n(e.h3,{id:"synchronous-reactivity",get children(){return n(e.a,{className:"heading",href:"#synchronous-reactivity",children:"Synchronous reactivity"})}}),`
`,n(e.p,{get children(){return[n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Synchronous",children:"Synchronous"}),` reactivity is Solid's default reactivity mode, where a system responds to changes in a direct and linear fashion.
When a signal changes, any corresponding subscribers are immediately updated in an ordered manner.`]}}),`
`,n(e.p,{children:`With synchronous reactivity, the system is able to respond to changes in a predictable manner.
This is useful in scenarios where the order of updates is important.
For example, if a subscriber depends on another signal, it is important that the subscriber is updated after the signal it depends on.`}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setCount"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"double"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"setDouble"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createEffect"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setDouble"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"() "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"2"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"const [count, setCount] = createSignal(0);const [double, setDouble] = createSignal(0);createEffect(() => { setDouble(count() * 2);});",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["In this example, the ",n(e.code,{children:"double"})," signal will always be updated after ",n(e.code,{children:"count"}),` due to synchronous reactivity.
This ensures that `,n(e.code,{children:"double"})," is always up-to-date with the latest value of ",n(e.code,{children:"count"}),"."]}}),`
`,n(e.h3,{id:"asynchronous-reactivity",get children(){return n(e.a,{className:"heading",href:"#asynchronous-reactivity",children:"Asynchronous reactivity"})}}),`
`,n(e.p,{get children(){return[n(e.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous",children:"Asynchronous"}),` reactivity is when a system responds to changes in a delayed or non-linear fashion.
When a signal changes, the corresponding subscribers are not immediately updated.
Instead, the system waits for a specific event or task to complete before updating the subscribers.`]}}),`
`,n(e.p,{children:`This is important in scenarios where subscribers depend on multiple signals.
In these cases, updating one signal before another could result in data inconsistency.
For example, if a subscriber depends on two signals, it is important that the subscriber is updated after both signals have been updated.
Rather, the system waits for both signals to be updated before updating the subscriber.`}),`
`,n(e.p,{get children(){return[n(e.strong,{children:"Note:"}),` When asynchronous reactivity is present, it is important to ensure that the system is able to handle the delay in updates.
`,n(e.a,{href:"/reference/reactive-utilities/batch",get children(){return n(e.code,{children:"batch"})}})," can be used to delay an update so the subscriber runs after each signal has been updated."]}}),`
`,n(e.h2,{id:"key-concepts",get children(){return n(e.a,{className:"heading",href:"#key-concepts",children:"Key concepts"})}}),`
`,n(e.ul,{get children(){return[`
`,n(e.li,{children:`Signals are the core elements of a reactive system.
They are responsible for storing and managing data.`}),`
`,n(e.li,{children:"Signals are both readable and writeable because of getters and setters."}),`
`,n(e.li,{children:"Subscribers are automated responders that track changes in signals and update the system accordingly."}),`
`,n(e.li,{children:"Signals and subscribers work together to ensure that the system is kept up-to-date with the latest data changes."}),`
`,n(e.li,{children:`A reactive system is built on the principles of data-driven reactivity.
This means that the system's reactivity is driven by the data it is built on.`}),`
`,n(e.li,{children:"Reactive systems can be synchronous or asynchronous."}),`
`]}}),`
`,n(e.p,{get children(){return["If you want to dive deeper, visit the ",n(e.a,{href:"/advanced-concepts/fine-grained-reactivity",children:"guide on fine-grained reactivity"}),"."]}})]}function d(r={}){const{wrapper:e}=Object.assign({},i(),r.components);return e?n(e,l(r,{get children(){return n(s,r)}})):s(r)}function c(r,e){throw new Error("Expected component `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{d as default};