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",
    blockquote: "blockquote",
    a: "a"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Signal adalah nilai yang dapat dilacak, tetapi mereka hanya satu setengah dari persamaan. Untuk melengkapi itu sebuah pengamat (observer) yang bisa diperbarui oleh value tersebut. Sebuah ", jsx(_components.em, {
        children: "effect"
      }), " adalah salah satu pengamat; dimana berjalan yang bergantung pada signal."]
    }), "\n", jsxs(_components.p, {
      children: ["Sebuah effect bisa dibuat dengan mengimport ", jsx(_components.code, {
        children: "createEffect"
      }), " dari ", jsx(_components.code, {
        children: "solid-js"
      }), " dan menyediakannya sebuah fungsi. Effect akan otomatis menganut ke signal apapun yang dibaca selama eksekusi fungsi dan menjalankan kembali ketika ada perubahan."]
    }), "\n", jsxs(_components.p, {
      children: ["Jadi ayo buat sebuah Effect yang berjalan kembali kapanpun ", jsx(_components.code, {
        children: "count"
      }), " berubah:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", 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: "\"The count is now\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Untuk memperbarui Signal ", jsx(_components.code, {
        children: "count"
      }), ", kita akan memberikan handler ketika tombol ditekan (click handler) ke tombol kita:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<button onClick={", 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-title class_",
          children: "Click"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Me"
        }), "</button>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Sekarang jika ditekan tombolnya akan menampilkan tulisan ke console. Ini relatif contoh sederhana, tapi untuk paham bagaimana Solid bekerja, kamu harus membayangkan bahwa setiap expression di JSX memiliki effect tersendiri dan di eksekusi kembali kapanpun tergantung dari signal yang berubah. Inilah cara bagaimana semua rendering bekerja di Solid: dari perspektif Solid, ", jsx(_components.em, {
        children: "semua rendering hanya sebuah efek samping dari sistem yang reaktif"
      })]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Effect yang dibuat developer dengan ", jsx(_components.code, {
          children: "createEffect"
        }), " berjalan setelah proses rendering telah selesai dan kebanyakan digunakan untuk menjadwalkan sebuah pembaruan yang berinteraksi dengan DOM. Jika kamu ingin memodifikasi DOM lebih awal, gunakan ", jsx(_components.a, {
          href: "https://www.solidjs.com/docs/latest/api#createrendereffect",
          children: jsx(_components.code, {
            children: "createRenderEffect"
          })
        }), "."]
      }), "\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-eee693e7.js.map
