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: "Most of the time, composing derived signals is sufficient. However, it is sometimes beneficial to cache values in order to reduce duplicated work. We can use memos to evaluate a function and store the result until its dependencies change. This is great for caching calculations for effects that have other dependencies and mitigating the work required for expensive operations like DOM node creation."
    }), "\n", jsx(_components.p, {
      children: "Memos are both an observer, like an effect, and a read-only signal. Since they are aware of both their dependencies and their observers, they can ensure that they run only once for any change. This makes them preferable to registering effects that write to signals. Generally, what can be derived, should be derived."
    }), "\n", jsxs(_components.p, {
      children: ["Creating a Memo is as simple as passing a function to ", jsx(_components.code, {
        children: "createMemo"
      }), ", imported from ", jsx(_components.code, {
        children: "solid-js"
      }), ". In the example, recalculating the value gets increasingly more expensive with each click. If we wrap it in ", jsx(_components.code, {
        children: "createMemo"
      }), ", it recalculates only once per click:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Place a ", jsx(_components.code, {
        children: "console.log"
      }), " inside the ", jsx(_components.code, {
        children: "fib"
      }), " function to confirm how often it runs:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Calculating Fibonacci\""
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\n});\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-2af0db8f.js.map
