import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    a: "a",
    blockquote: "blockquote"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.em, {
        children: "Signals"
      }), " are the cornerstone of reactivity in Solid. They contain values that change over time; when you change a signal's value, it automatically updates anything that uses it."]
    }), "\n", jsxs(_components.p, {
      children: ["To create a signal, let's import ", jsx(_components.code, {
        children: "createSignal"
      }), " from ", jsx(_components.code, {
        children: "solid-js"
      }), " and call it from our Counter component like this:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["The argument passed to the create call is the initial value, and the return value is an array with two functions, a getter and a setter. By ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
        children: "destructuring"
      }), ", we can name these functions whatever we like. In this case, we name the getter ", jsx(_components.code, {
        children: "count"
      }), " and the setter ", jsx(_components.code, {
        children: "setCount"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "It is important to notice that the first returned value is a getter (a function returning the current value) and not the value itself. This is because the framework needs to keep track of where that signal is read so it can update things accordingly."
    }), "\n", jsxs(_components.p, {
      children: ["In this lesson, we'll use JavaScript's ", jsx(_components.code, {
        children: "setInterval"
      }), " function to create a periodically incrementing counter. We can update our ", jsx(_components.code, {
        children: "count"
      }), " signal every second by adding this code to our Counter component:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Each tick, we read the previous count, add 1, and set the new value."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solid's signals also accept a function form where you can use the previous value to set the next value."
      }), "\n", jsx(_components.pre, {
        children: jsxs(_components.code, {
          className: "hljs language-jsx",
          children: [jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsxs(_components.span, {
            className: "hljs-function",
            children: [jsx(_components.span, {
              className: "hljs-params",
              children: "c"
            }), " =>"]
          }), " c + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), ");\n"]
        })
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Finally, we need to read the signal in our JSX code:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Count: {count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-27789970.js.map
