import{_ as h,k as n,t as p,x as c,D as i,A as o}from"./index--mkBkEwj.js";var F=o('<div id="First render">'),u=o('<div id="After increment">');function a(l){const e=Object.assign({p:"p",div:"div",style:"style",script:"script",figure:"figure",figcaption:"figcaption",pre:"pre",code:"code",span:"span",button:"button",ol:"ol",li:"li",strong:"strong",em:"em",h2:"h2",a:"a",ins:"ins"},h(),l.components),{TabsCodeBlocks:s,Callout:r}=e;return r||d("Callout"),s||d("TabsCodeBlocks"),[n(e.p,{children:`State management is process of handling and manipulating data that affects the behavior and presentation of a web application.
To build interactive and dynamic web applications, state management is a critical aspect of development.
Within Solid, state management is facilitated through the use of reactive primitives.`}),`
`,n(e.p,{children:"These state management concepts will be shown using a basic counter example:"}),`
`,n(e.div,{className:"expressive-code",get children(){return[n(e.style,{children:`.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);font-weight:var(--ec-uiFontWg);line-height:var(--ec-uiLineHt);text-size-adjust:none;-webkit-text-size-adjust:none}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre > code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);font-weight:var(--ec-codeFontWg);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre.wrap .ec-line .code{white-space:pre-wrap;overflow-wrap:break-word;min-width:min(20ch, var(--ecMaxLine, 20ch))}.expressive-code pre.wrap .ec-line .code span.indent{white-space:pre}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-areas:'gutter code';grid-template-columns:auto 1fr;position:relative}.expressive-code .ec-line .gutter{grid-area:gutter;color:var(--ec-gtrFg)}.expressive-code .ec-line .gutter > *{pointer-events:none;user-select:none;-webkit-user-select:none}.expressive-code .ec-line .gutter ~ .code{--ecLineBrdCol:var(--ec-gtrBrdCol)}.expressive-code .ec-line.highlight .gutter{color:var(--ec-gtrHlFg)}.expressive-code .ec-line .code{grid-area:code;position:relative;box-sizing:content-box;padding-inline-start:calc(var(--ecIndent, 0ch) + var(--ec-codePadInl) - var(--ecGtrBrdWd));padding-inline-end:var(--ec-codePadInl);text-indent:calc(var(--ecIndent, 0ch) * -1)}.expressive-code .ec-line .code::before,.expressive-code .ec-line .code::after,.expressive-code .ec-line .code :where(*){text-indent:0}.expressive-code .ec-line .code{--ecGtrBrdWd:var(--ec-gtrBrdWd);border-inline-start:var(--ecGtrBrdWd) solid var(--ecLineBrdCol, transparent)}.expressive-code :nth-child(1 of .ec-line) .code{padding-inline-end:calc(2rem + var(--ec-codePadInl))}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol:var(--ec-tm-markBg)}.expressive-code .ec-line.mark .code{--ecLineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol:var(--ec-tm-insBg);--tmLabel:var(--ec-tm-insDiffIndContent)}.expressive-code .ec-line.ins .code{--ecLineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins .code::before{color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol:var(--ec-tm-delBg);--tmLabel:var(--ec-tm-delDiffIndContent)}.expressive-code .ec-line.del .code{--ecLineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del .code::before{color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{background:var(--tmLineBgCol)}.expressive-code .ec-line.mark .code,.expressive-code .ec-line.ins .code,.expressive-code .ec-line.del .code{--ecGtrBrdWd:var(--ec-tm-lineMarkerAccentWd)}.expressive-code .ec-line.mark .code::before,.expressive-code .ec-line.ins .code::before,.expressive-code .ec-line.del .code::before{display:block;position:absolute;left:0;box-sizing:border-box;content:var(--tmLabel, ' ');padding-inline-start:var(--ec-tm-lineDiffIndMargLeft);text-align:center;white-space:pre}.expressive-code .ec-line.mark.tm-label .code::before,.expressive-code .ec-line.ins.tm-label .code::before,.expressive-code .ec-line.del.tm-label .code::before{background:var(--ecLineBrdCol);padding:0 calc(var(--ec-tm-lineMarkerLabelPadInl) + var(--ec-tm-lineMarkerAccentWd)) 0 var(--ec-tm-lineMarkerLabelPadInl);color:var(--ec-tm-lineMarkerLabelCol)}.expressive-code .ec-line mark{--tmInlineBgCol:var(--ec-tm-markBg);--tmInlineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol:var(--ec-tm-insBg);--tmInlineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol:var(--ec-tm-delBg);--tmInlineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL:var(--ec-tm-inlMarkerBrdWd);--tmBrdR:var(--ec-tm-inlMarkerBrdWd);--tmRadL:var(--ec-tm-inlMarkerBrdRad);--tmRadR:var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL:0px;--tmRadL:0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR:0px;--tmRadR:0}.expressive-code .ec-line mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:'';position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius:calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing:0.4rem;--code-background:var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:'\\a0'}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing:calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:'';position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:'';position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing:calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background:var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:'';position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:'';position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:'';position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size:0.35rem;--tooltip-bg:var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:'';position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code{}.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),.expressive-code .frame .copy .feedback.show ~ button:not(:hover){opacity:0.75}}:root,:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light']{--ec-brdRad:0.3rem;--ec-brdWd:1.5px;--ec-brdCol:#ffffff00;--ec-codeFontFml:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--ec-codeFontSize:0.85rem;--ec-codeFontWg:400;--ec-codeLineHt:1.65;--ec-codePadBlk:1rem;--ec-codePadInl:1.35rem;--ec-codeBg:#ffffff;--ec-codeFg:#212121;--ec-codeSelBg:#add6ff;--ec-gtrFg:#8d8d8d;--ec-gtrBrdCol:#8d8d8d33;--ec-gtrBrdWd:1.5px;--ec-gtrHlFg:#757575;--ec-uiFontFml:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--ec-uiFontSize:0.9rem;--ec-uiFontWg:400;--ec-uiLineHt:1.65;--ec-uiPadBlk:0.25rem;--ec-uiPadInl:1rem;--ec-uiSelBg:#eee;--ec-uiSelFg:#212121;--ec-focusBrd:#d0d0d0;--ec-sbThumbCol:#64646466;--ec-sbThumbHoverCol:#646464b2;--ec-tm-lineMarkerAccentMarg:0rem;--ec-tm-lineMarkerAccentWd:0.15rem;--ec-tm-lineMarkerLabelPadInl:0.2rem;--ec-tm-lineMarkerLabelCol:white;--ec-tm-lineDiffIndMargLeft:0.3rem;--ec-tm-inlMarkerBrdWd:1.5px;--ec-tm-inlMarkerBrdRad:0.2rem;--ec-tm-inlMarkerPad:0.15rem;--ec-tm-insDiffIndContent:'+';--ec-tm-delDiffIndContent:'-';--ec-tm-markBg:#9fb6ff80;--ec-tm-markBrdCol:#5570b3d0;--ec-tm-insBg:#94c68480;--ec-tm-insBrdCol:#4e7e41d0;--ec-tm-insDiffIndCol:#3a692fd0;--ec-tm-delBg:#fea09280;--ec-tm-delBrdCol:#ae594fd0;--ec-tm-delDiffIndCol:#97453dd0;--ec-frm-shdCol:#00000028;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000028;--ec-frm-edActTabBg:#ffffff;--ec-frm-edActTabFg:#424242;--ec-frm-edActTabBrdCol:transparent;--ec-frm-edActTabIndHt:1.5px;--ec-frm-edActTabIndTopCol:null;--ec-frm-edActTabIndBtmCol:#fff;--ec-frm-edTabsMargInlStart:0;--ec-frm-edTabsMargBlkStart:0;--ec-frm-edTabBrdRad:0.3rem;--ec-frm-edTabBarBg:#f6f6f6;--ec-frm-edTabBarBrdCol:#ffffff00;--ec-frm-edTabBarBrdBtmCol:#fff;--ec-frm-edBg:#ffffff;--ec-frm-trmTtbFg:#333333;--ec-frm-trmTtbDotsFg:#333333;--ec-frm-trmTtbDotsOpa:0.15;--ec-frm-trmTtbBg:#f6f6f6;--ec-frm-trmTtbBrdBtmCol:#ffffff00;--ec-frm-trmBg:#fff;--ec-frm-inlBtnFg:#212121;--ec-frm-inlBtnBg:#212121;--ec-frm-inlBtnBgIdleOpa:0;--ec-frm-inlBtnBgHoverOrFocusOpa:0.2;--ec-frm-inlBtnBgActOpa:0.3;--ec-frm-inlBtnBrd:#212121;--ec-frm-inlBtnBrdOpa:0.4;--ec-frm-tooltipSuccessBg:#4c8300;--ec-frm-tooltipSuccessFg:white}.expressive-code .ec-line :where(span[style^='--']:not([class])),:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light'] .ec-line :where(span[style^='--']:not([class])){color:var(--0, inherit);font-style:var(--0fs, inherit);font-weight:var(--0fw, inherit);text-decoration:var(--0td, inherit)}@media (prefers-color-scheme: dark){:root:not([data-theme='min-light']){--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root:not([data-theme='min-light']) .expressive-code .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']),.expressive-code[data-theme='material-theme-ocean']{--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']) .ec-line :where(span[style^='--']:not([class])),.expressive-code[data-theme='material-theme-ocean'] .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}`}),n(e.script,{type:"module",children:'(()=>{function i(n){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=n,document.body.appendChild(e);let r=document.createRange();r.selectNode(e);let o=getSelection();if(!o)return!1;o.removeAllRanges(),o.addRange(r);let a=!1;try{a=document.execCommand("copy")}finally{o.removeAllRanges(),document.body.removeChild(e)}return a}async function l(n){let e=n.currentTarget,r=e.dataset,o=!1,a=r.code.replace(/\\u007f/g,`\n`);try{await navigator.clipboard.writeText(a),o=!0}catch{o=i(a)}if(!o||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(r.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}var s=n=>{n.querySelectorAll&&n.querySelectorAll(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))};s(document);var u=new MutationObserver(n=>n.forEach(e=>e.addedNodes.forEach(r=>{s(r)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();'}),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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),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",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:"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",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":"#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:"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",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",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.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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"button"}),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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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":'import { createSignal } from "solid-js";function Counter() {  const [count, setCount] = createSignal(0);  const increment = () => {    setCount((prev) => prev + 1);  };  return (    <>      <div>Current count: {count()}</div>      <button onClick={increment}>Increment</button>    </>  );}',get children(){return n(e.div,{})}})}})]}})]}}),`
`,n(e.p,{children:"There are 3 elements to state management:"}),`
`,n(e.ol,{get children(){return[`
`,n(e.li,{get children(){return[`
`,n(e.p,{get children(){return[n(e.strong,{get children(){return["State (",n(e.code,{children:"count"}),")"]}}),": The ",n(e.em,{children:"data"})," that is used to determine what content to display to the user."]}}),`
`]}}),`
`,n(e.li,{get children(){return[`
`,n(e.p,{get children(){return[n(e.strong,{get children(){return["View (",n(e.code,{children:"<div>{count()}</div>"}),")"]}}),": The ",n(e.em,{children:"visual representation"})," of the state to the user."]}}),`
`]}}),`
`,n(e.li,{get children(){return[`
`,n(e.p,{get children(){return[n(e.strong,{get children(){return["Actions (",n(e.code,{children:"increment"}),")"]}}),": Any event that ",n(e.em,{children:"modifies"})," the state."]}}),`
`]}}),`
`]}}),`
`,n(e.p,{children:`These elements work together to create a "one way data flow".
When actions modify the state, the view is updated to show the current state to the user.
One way data flow simplifies the management of data and user interactions, which provides a more predictable and maintainable application.`}),`
`,n(e.h2,{id:"managing-basic-state",get children(){return n(e.a,{className:"heading",href:"#managing-basic-state",children:"Managing basic state"})}}),`
`,n(e.p,{get children(){return[`State is the source of truth for the application, and is used to determine what content to display to the user.
State is represented by a `,n(e.a,{href:"/concepts/signals",children:"signal"}),", which is a reactive primitive that manages state and notifies the UI of any changes."]}}),`
`,n(e.p,{get children(){return["To create a piece of state, you use the ",n(e.a,{href:"/reference/basic-reactivity/create-signal",get children(){return n(e.code,{children:"createSignal"})}})," function and pass in the initial value of the state:"]}}),`
`,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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),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",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:"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:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createSignal } from "solid-js";const [count, setCount] = createSignal(0);',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:"To access the current value of the state, you call the signal's getter function:"}),`
`,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:"// 0"})]}})}})}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"console.log(count()); // 0",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{children:"To update the state, you use the signal's setter function:"}),`
`,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":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),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","--1fs":"italic"},children:"prev"}),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:" prev "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),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":"#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:"// 1"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"setCount((prev) => prev + 1);console.log(count()); // 1",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return[`With signals, you can create and manage state in a simple and straightforward manner.
This allows you to focus on the logic of your application, rather than the complexities of state management.
Additionally, signals are reactive, which means as long as it is accessed within a `,n(e.a,{href:"/concepts/intro-to-reactivity#tracking-changes",children:"tracking scope"}),", it will always be up to date."]}}),`
`,n(e.h2,{id:"rendering-state-in-the-ui",get children(){return n(e.a,{className:"heading",href:"#rendering-state-in-the-ui",children:"Rendering state in the UI"})}}),`
`,n(e.p,{children:`To achieve a dynamic user interface, the UI must be able to reflect the current state of the data.
The UI is the visual representation of the state to the user, and is rendered using JSX.
JSX provides a tracking scope, which keeps the view in sync with the state.`}),`
`,n(e.p,{get children(){return["Revisiting the ",n(e.code,{children:"Counter"})," component presented earlier, rendering the current state of ",n(e.code,{children:"count"})," is done within the return body using JSX:"]}}),`
`,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":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},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"},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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"button"}),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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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,{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":"return (  <>    <div>Current count: {count()}</div>    <button onClick={increment}>Increment</button>  </>);",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["To render the current state of ",n(e.code,{children:"count"}),", the JSX expression ",n(e.code,{children:"{count()}"}),` is used.
The curly braces indicate that the expression is a JavaScript expression, and the parentheses indicate that it is a function call.
This expression is representative of a getter function for `,n(e.code,{children:"count"}),` and will retrieve the current state value.
When the state is updated, the UI will be re-rendered to reflect the new state value.`]}}),`
`,n(e.p,{children:`Components in Solid only run once upon their initialization.
After this initial render, if any changes are made to the state, only the portion of the DOM that is directly associated with the signal change will be updated.`}),`
`,n(e.p,{get children(){return[`The ability to update only the relevant portions of the DOM is a key feature of Solid that allows for performant and efficient UI updates.
This is known as `,n(e.a,{href:"/advanced-concepts/fine-grained-reactivity",children:"fine-grained reactivity"}),`.
Through reducing the re-rendering of entire components or larger DOM segments, UI will remain more efficient and responsive for the user.`]}}),`
`,n(e.h2,{id:"reacting-to-changes",get children(){return n(e.a,{className:"heading",href:"#reacting-to-changes",children:"Reacting to changes"})}}),`
`,n(e.p,{children:`When the state is updated, any updates are reflected in the UI.
However, there may be times when you want to perform additional actions when the state changes.`}),`
`,n(e.p,{get children(){return["For example, in the ",n(e.code,{children:"Counter"})," component, you may want to display the doubled value of ",n(e.code,{children:"count"}),` to the user.
This can be achieved through the use of `,n(e.a,{href:"/concepts/effects",children:"effects"}),", which are reactive primitives that perform side effects when the state changes:"]}}),`
`,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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},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":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),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",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:"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":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"doubleCount"}),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:"setDoubleCount"}),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.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Initialize a new state for doubleCount"})]}})}}),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":"#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":"#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:"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",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",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":"#6F42C1","--1":"#82AAFF"},children:"setDoubleCount"}),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.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// Update doubleCount 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.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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" // Display the doubled count"})]}})}}),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:"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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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":'import { createSignal, createEffect } from "solid-js";function Counter() {  const [count, setCount] = createSignal(0);  const [doubleCount, setDoubleCount] = createSignal(0); // Initialize a new state for doubleCount  const increment = () => {    setCount((prev) => prev + 1);  };  createEffect(() => {    setDoubleCount(count() * 2); // Update doubleCount whenever count changes  });  return (    <>      <div>Current count: {count()}</div>      <div>Doubled count: {doubleCount()}</div> // Display the doubled count      <button onClick={increment}>Increment</button>    </>  );}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["The ",n(e.a,{href:"/reference/basic-reactivity/create-effect",get children(){return n(e.code,{children:"createEffect"})}}),` function sets up a function to perform side effects whenever the state is modified.
Here, a side-effect refers to operations or updates that affect state outside of the local environment - like modifying a global variable or updating the DOM - triggered by those state changes.`]}}),`
`,n(e.p,{get children(){return["In the ",n(e.code,{children:"Counter"})," component, a ",n(e.code,{children:"createEffect"})," function can be used to update the ",n(e.code,{children:"doubleCount"})," state whenever the ",n(e.code,{children:"count"}),` state changes.
This keeps the `,n(e.code,{children:"doubleCount"})," state in sync with the ",n(e.code,{children:"count"})," state, and allows the UI to display the doubled value of ",n(e.code,{children:"count"})," to the user."]}}),`
`,n(e.p,{get children(){return["View this example of ",n(e.a,{href:"https://playground.solidjs.com/anonymous/b05dddaa-e62a-4c56-b745-5704f3a40194",get children(){return[n(e.code,{children:"doubleCount"})," in a ",n(e.code,{children:"createEffect"})," in the Solid Playground example"]}}),"."]}}),`
`,n(s,{get children(){return[(()=>{var t=c(F);return i(t,n(e.p,{get children(){return n(e.code,{children:'html title="Counter.tsx" Current count: 0 Doubled count: 0 '})}})),t})(),(()=>{var t=c(u);return i(t,n(e.p,{get children(){return n(e.code,{children:'html title="Counter.tsx" Current count: 1 Doubled count: 2 '})}})),t})()]}}),`
`,n(e.h2,{id:"derived-state",get children(){return n(e.a,{className:"heading",href:"#derived-state",children:"Derived state"})}}),`
`,n(e.p,{children:`When you want to calculate new state values based on existing state values, you can use derived state.
This is a useful pattern when you want to display a transformation of a state value to the user, but do not want to modify the original state value or create a new state value.`}),`
`,n(e.p,{get children(){return["Derived values can be created using a signal within a function, which can be referred to as a ",n(e.a,{href:"/concepts/derived-values/derived-signals",children:"derived signal"}),"."]}}),`
`,n(e.p,{get children(){return["This approach can be used to simplify the ",n(e.code,{children:"doubleCount"})," example above, where the additional signal and effect can be replaced with a derived 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":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--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":"#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 highlight del",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9b2222","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#115292","--1":"#BABED8"},children:"doubleCount"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#115292","--1":"#BABED8"},children:"setDoubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#9b2222","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:"("}),n(e.span,{style:{"--0":"#115292","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},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":"#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":"#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:"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",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",children:`
`})}}),n(e.div,{className:"ec-line highlight del",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"createEffect"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#9b2222","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line highlight del",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"setDoubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:"("}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:"() "}),n(e.span,{style:{"--0":"#9b2222","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#115292","--1":"#F78C6C"},children:"2"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#515253","--1":"#a2a4ae","--1fs":"italic"},children:"// Update doubleCount whenever count changes"})]}})}}),n(e.div,{className:"ec-line highlight del",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":"#f2848a"},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 highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#BABED8"},children:"doubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"() "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#F78C6C"},children:"2"})]}})}}),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.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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#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:"button"}),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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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":'import { createSignal } from "solid-js"function Counter() {  const [count, setCount] = createSignal(0);  const [doubleCount, setDoubleCount] = createSignal(0);  const increment = () => {    setCount((prev) => prev + 1);  };  createEffect(() => {    setDoubleCount(count() * 2); // Update doubleCount whenever count changes  });  const doubleCount = () => count() * 2  return (    <>      <div>Current count: {count()}</div>      <div>Doubled count: {doubleCount()}</div>      <button onClick={increment}>Increment</button>    </>  );}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["While this approach works for simple use cases, if ",n(e.code,{children:"doubleCount"})," is used several times within a component or contains a computationally expensive calculation, it can lead to performance issues."]}}),`
`,n(e.p,{get children(){return["The derived signal would be re-evaluated not just each time ",n(e.code,{children:"count"})," is changed, but also for each use of ",n(e.code,{children:"doubleCount()"}),"."]}}),`
`,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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--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":"#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.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":"#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":"#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:"setCount"}),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:"1"}),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.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line highlight del",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9b2222","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#BABED8"},children:"doubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#9b2222","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#9b2222","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:"() "}),n(e.span,{style:{"--0":"#9b2222","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2848a"},children:" "}),n(e.span,{style:{"--0":"#115292","--1":"#F78C6C"},children:"2"})]}})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#BABED8"},children:"doubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#613aa9"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--1":"#82AAFF"},children:"log"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"("}),n(e.span,{style:{"--0":"#185f29"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--1":"#C3E88D"},children:"doubleCount called"}),n(e.span,{style:{"--1":"#89DDFF"},children:"'"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:")"})]}})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"() "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#F78C6C"},children:"2"})]}})}}),n(e.div,{className:"ec-line highlight ins",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",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.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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"doubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"doubleCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#185f29","--1":"#f2868c"},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:"button"}),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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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.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":`import { createSignal } from "solid-js"function Counter() {  const [count, setCount] = createSignal(0)  const increment = () => {    setCount(count() + 1)  }  const doubleCount = () => count() * 2  const doubleCount = () => {    console.log('doubleCount called')    return count() * 2  }  return (    <>      <div>Current count: {count()}</div>      <div>Doubled count: {doubleCount()}</div>      <div>Doubled count: {doubleCount()}</div>      <div>Doubled count: {doubleCount()}</div>      <button onClick={increment}>Increment</button>    </>  )}`,get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame is-terminal has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"Console output"})}}),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":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"doubleCount calleddoubleCount calleddoubleCount called",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["For cases like this, you can use ",n(e.a,{href:"/concepts/derived-values/memos",children:"Memos"})," to store the value of ",n(e.code,{children:"doubleCount"}),`, which are also referred to as a memoized or cached value.
When using a memo, the calculation will only run `,n(e.strong,{children:"once"})," when the value of ",n(e.code,{children:"count"})," changes and can be accessed multiple times without re-evaluating for each additional use."]}}),`
`,n(e.p,{get children(){return["Using the ",n(e.a,{href:"/reference/basic-reactivity/create-memo",get children(){return n(e.code,{children:"createMemo"})}})," function, you can create a memoized value:"]}}),`
`,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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.ins,{get children(){return[n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createMemo"})]}}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--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":"#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.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":"#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":"#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:"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",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",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:"doubleCount"}),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":"#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:"doubleCount called"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),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",children:"    "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),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.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",children:`
`})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"doubleCountMemo"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"createMemo"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"console"}),n(e.span,{style:{"--0":"#613aa9"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--1":"#82AAFF"},children:"log"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"("}),n(e.span,{style:{"--0":"#185f29"},get children(){return[n(e.span,{style:{"--1":"#89DDFF"},children:"'"}),n(e.span,{style:{"--1":"#C3E88D"},children:"doubleCountMemo called"}),n(e.span,{style:{"--1":"#89DDFF"},children:"'"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:")"})]}})}}),n(e.div,{className:"ec-line highlight ins",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:"() "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"*"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2868c"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#F78C6C"},children:"2"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#f2868c"},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.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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current 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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"doubleCountMemo"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"doubleCountMemo"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line highlight ins",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":"#185f29","--1":"#f2868c"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"doubleCountMemo"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#185f29","--1":"#f2868c"},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:"button"}),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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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":`import { createSignal, createMemo } from "solid-js"function Counter() {  const [count, setCount] = createSignal(0)  const increment = () => {    setCount((prev) => prev + 1);  };  const doubleCount = () => {    console.log('doubleCount called')    return count() * 2  }  const doubleCountMemo = createMemo(() => {    console.log('doubleCountMemo called')    return count() * 2  })  return (    <>      <div>Current count: {count()}</div>      <div>Doubled count: {doubleCount()}</div>      <div>Doubled count: {doubleCount()}</div>      <div>Doubled count: {doubleCount()}</div>      <div>Doubled count: {doubleCountMemo()}</div>      <div>Doubled count: {doubleCountMemo()}</div>      <div>Doubled count: {doubleCountMemo()}</div>      <button onClick={increment}>Increment</button>    </>  );}`,get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame is-terminal has-title",get children(){return[n(e.figcaption,{className:"header",get children(){return n(e.span,{className:"title",children:"Console output"})}}),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":"#24292E","--1":"#BABED8"},children:"doubleCountMemo called"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount called"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"doubleCountMemo calleddoubleCount calleddoubleCount calleddoubleCount called",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["While accessed multiple times, the ",n(e.code,{children:"doubleCountMemo"}),` will only re-evaluate and log once.
This is different from the derived signal, `,n(e.code,{children:"doubleCount"}),", which is re-evaluated for each time it is accessed."]}}),`
`,n(e.p,{get children(){return["View a similar ",n(e.a,{href:"https://playground.solidjs.com/anonymous/288736aa-d5ba-45f7-a01f-1ac3dcb1b479",children:"example comparing a derived signal and a memo in the Solid Playground"}),"."]}}),`
`,n(e.h2,{id:"lifting-state",get children(){return n(e.a,{className:"heading",href:"#lifting-state",children:"Lifting state"})}}),`
`,n(e.p,{get children(){return[`When you want to share state between components, you can lift state up to a common ancestor component.
While state is not tied to components, you may want to link multiple components together in order to access and manipulate the same piece of state.
This can keep things synchronized across the `,n(e.a,{href:"/concepts/components/basics#component-trees",children:"component tree"})," and allow for more predictable state management."]}}),`
`,n(e.p,{get children(){return["For example, in the ",n(e.code,{children:"Counter"})," component, you may want to display the doubled value of ",n(e.code,{children:"count"})," to the user through a separate 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":"#89DDFF","--1fs":"italic"},children:"import"}),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":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createEffect"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createMemo"}),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"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),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:"solid-js"}),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",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:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),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":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"doubleCount"}),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:"setDoubleCount"}),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":"#1669BB","--1":"#BABED8"},children:"squaredCount"}),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:"createMemo"}),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:"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":"#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",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":"#6F42C1","--1":"#82AAFF"},children:"setDoubleCount"}),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,{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.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":"#1669BB","--1":"#FFCB6B"},children:"Counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"count"}),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":"#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":"#6F42C1","--1":"#C792EA"},children:"setCount"}),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:"setCount"}),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":"#1669BB","--1":"#FFCB6B"},children:"DisplayCounts"})]}})}}),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":"#C792EA"},children:"count"}),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":"#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",get children(){return[n(e.span,{className:"indent",children:"        "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"doubleCount"}),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":"#6F42C1","--1":"#82AAFF"},children:"doubleCount"}),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":"#C792EA"},children:"squaredCount"}),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":"#6F42C1","--1":"#82AAFF"},children:"squaredCount"}),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",get children(){return n(e.span,{style:{"--0":"#24292E","--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.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:"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":"#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","--1fs":"italic"},children:"props"}),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":"#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":"#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:"props"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#89DDFF"},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",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",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.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:"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.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Increment"}),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.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:"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":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"DisplayCounts"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Current count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),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":"#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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Doubled count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"doubleCount"}),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:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Squared count: "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"squaredCount"}),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:"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","--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:"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":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"default"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" App"}),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":'import { createSignal, createEffect, createMemo } from "solid-js";function App() {  const [count, setCount] = createSignal(0);  const [doubleCount, setDoubleCount] = createSignal(0);  const squaredCount = createMemo(() => count() * count());  createEffect(() => {    setDoubleCount(count() * 2);  });  return (    <>      <Counter count={count()} setCount={setCount} />      <DisplayCounts        count={count()}        doubleCount={doubleCount()}        squaredCount={squaredCount()}      />    </>  );}function Counter(props) {  const increment = () => {    props.setCount((prev) => prev + 1);  };  return <button onClick={increment}>Increment</button>;}function DisplayCounts(props) {  return (    <div>      <div>Current count: {props.count}</div>      <div>Doubled count: {props.doubleCount}</div>      <div>Squared count: {props.squaredCount}</div>    </div>  );}export default App;',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["To share the ",n(e.code,{children:"count"})," state between the ",n(e.code,{children:"Counter"})," and ",n(e.code,{children:"DisplayCounts"})," components, you can lift the state up to the ",n(e.code,{children:"App"}),` component.
This allows the `,n(e.code,{children:"Counter"})," and ",n(e.code,{children:"DisplayCounts"})," functions to access the same piece of state, but also allows the ",n(e.code,{children:"Counter"})," component to update the state through the ",n(e.code,{children:"setCount"})," setter function."]}}),`
`,n(e.p,{get children(){return["When sharing state between components, you can access the state through ",n(e.a,{href:"/concepts/components/props",get children(){return n(e.code,{children:"props"})}}),`.
Props values that are passed down from the parent component are read-only, which means they cannot be directly modified by the child component.
However, you can pass down setter functions from the parent component to allow the child component to indirectly modify the parent's state.`]}}),`
`,n(r,{get children(){return[n(e.p,{children:"To encourage one-way data flow, props are passed as read-only or immutable values from the parent to child components."}),n(e.p,{get children(){return["There are ",n(e.a,{href:"/concepts/components/props",children:"specific utility functions for props"}),", however, that offer methods to modify props values."]}})]}}),`
`,n(e.h2,{id:"managing-complex-state",get children(){return n(e.a,{className:"heading",href:"#managing-complex-state",children:"Managing complex state"})}}),`
`,n(e.p,{get children(){return[`As applications grow in size and complexity, lifting state can become difficult to manage.
To avoid the concept of prop drilling, which is the process of passing props through multiple components, Solid offers `,n(e.a,{href:"/concepts/stores",children:"stores"})," to manage state in a more scalable and maintainable manner."]}}),`
`,n(e.p,{get children(){return["To learn more about managing complex state, navigate to the ",n(e.a,{href:"/guides/complex-state-management",children:"complex state management page"}),"."]}})]}function m(l={}){const{wrapper:e}=Object.assign({},h(),l.components);return e?n(e,p(l,{get children(){return n(a,l)}})):a(l)}function d(l,e){throw new Error("Expected component `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}export{m as default};