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",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "There are only a few Lifecycle functions in Solid as everything lives and dies by the reactive system. The reactive system is created and updates synchronously, so the only scheduling comes down to Effects which are pushed to the end of the update."
    }), "\n", jsxs(_components.p, {
      children: ["We've found that developers doing basic tasks don't often think this way, so to make things a\nlittle easier we've made an alias, ", jsx(_components.code, {
        children: "onMount"
      }), ". ", jsx(_components.code, {
        children: "onMount"
      }), " is just a ", jsx(_components.code, {
        children: "createEffect"
      }), " call that is\nnon-tracking, which means it never re-runs. It is just an Effect call but you can use it with confidence\nthat it will run only once for your component, once all initial rendering is done."]
    }), "\n", jsxs(_components.p, {
      children: ["Let's use the ", jsx(_components.code, {
        children: "onMount"
      }), " hook to fetch some photos:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-keyword",
          children: "async"
        }), " () => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " res = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fetch"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "`https://jsonplaceholder.typicode.com/photos?_limit=20`"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setPhotos"
        }), "(", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " res.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "json"
        }), "());\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Lifecycles are only run in the browser, so putting code in ", jsx(_components.code, {
        children: "onMount"
      }), " has the benefit of not running on the server during SSR. Even though we are doing data fetching in this example, usually we use Solid's resources for true server/browser coordination."]
    })]
  });
}
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-8a2010ce.js.map
