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",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Kita telah melihat bahwa kapanpun kita mengakses sebuah signal didalam JSX, secara otomatis akan memperbarui tampilan dengan signal yang berubah. Tapi fungsi komponen itu sendiri hanya tereksekusi satu kali."
    }), "\n", jsx(_components.p, {
      children: "Kita bisa membuat ekspresi baru yang tergantung dengan signal dengan membungkus signal tersebut dengan sebuah fungsi. Fungsi yang mengakses sebuah signal juga secara efektif merupakan signal juga: ketika signal yang dibungkusnya berubah ia akan mengembalikan hasil pembaruannya ke manapun yang membaca nilainya."
    }), "\n", jsxs(_components.p, {
      children: ["Mari kita perbarui Counter kita untuk mengalikannya dengan 2 yang dibuat oleh fungsi ", jsx(_components.code, {
        children: "doubleCount"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "doubleCount"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() * ", jsx(_components.span, {
          className: "hljs-number",
          children: "2"
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Selanjutnya kita bisa memanggil ", jsx(_components.code, {
        children: "doubleCount"
      }), " seperti sebuah sigmal didalam JSX:"]
    }), "\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: {doubleCount()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Kita memanggil fungsi seperti ini ", jsx(_components.em, {
        children: "derived signals"
      }), " (signal turunan) karena mereka mendapatkan reaktivitas mereka dari signal yang mereka akses. Mereka tidak menyimpan nilainya sendiri (jika kamu membuat signal turunan tapi tidak pernah memanggilnya, itu akan dihilangkan dari hasil keluaran Solid seperti fungsi apapun yang tidak digunakan) tapi mereka akan memperbarui effect apaapun yang bergantung kepada mereka, dan mereka akan memicu rerender jika termasuk dalam sebuah view."]
    })]
  });
}
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-01d366ed.js.map
