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: "Biasanya, membungkus signal turunan adalah hal yang cukup. Namun, terkadang berguna juga untuk mengcache value yang bertujuan untuk mengurangi pekerjaan yang terduplikasi. Kita bisa menggunakan memo untuk mengevaluasi sebuah fungsi dan menyimpan haslnya sampai dependensi-dependensinya berubah. Hal ini bagus untuk mencache kalkulasi untuk effect yang memiliki dependensi yang lain dan memitigasi beban pekerjaan yang dibutuhkan untuk operasi yang \"mahal\" seperti membuat node DOM."
    }), "\n", jsx(_components.p, {
      children: "Memo juga bagaikan sebuah penganmat, sama seperti effect, dan juga hanya membaca signal. Sejak mereka mengetahui dependensi dan pengamat, mereka bisa memastikan bahwa mereka hanya berjalan ketika ada perubahan. Ini membuat mereka lebih baik untuk mendaftarkan effect yang mengubah signal. Umumnya, apa yang bisa diturunkan, seharusnya diturunkan juga."
    }), "\n", jsxs(_components.p, {
      children: ["Membuat sebuah Memo semudah kita memasukan fungsi ke ", jsx(_components.code, {
        children: "createMemo"
      }), ", di import dari ", jsx(_components.code, {
        children: "solid-js"
      }), ". Di contoh ini, menghitung value yang semakin lama semakin berat tiap disentuh. Jika kita membungkusnya ke dalam ", jsx(_components.code, {
        children: "createMemo"
      }), ", perhitungannya hanya dilakukan setiap sentuhan:"]
    }), "\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: ["Tempatkan ", jsx(_components.code, {
        children: "console.log"
      }), " didalam fungsi ", jsx(_components.code, {
        children: "fib"
      }), " untuk mengonfirmasi sesering apa dia berjalan:"]
    }), "\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-257ab82f.js.map
