import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Rendering",
  "children": [{
    "depth": 2,
    "value": "Kompilasi JSX",
    "children": []
  }, {
    "depth": 2,
    "value": "Atribut-Atribut dan Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Entry",
    "children": []
  }, {
    "depth": 2,
    "value": "Komponen-komponen",
    "children": []
  }, {
    "depth": 2,
    "value": "Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Turunan (Children)",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    strong: "strong",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendering",
        children: "#"
      }), "Rendering"]
    }), "\n", jsx(_components.p, {
      children: "Solid mendukung templating dalam 3 bentuk, JSX, Tagged Template Literals dan variasi HyperScript Solid, walaupun JSX yang paling paling dominan digunakan. Kenapa? Karena JSX adalah DSL yang dibuat untuk kompilasi. Dia memiliki syntax yang jelas, mendukung TypeScript, dapat bekerja dengan Babel dan mendukung alat-alat lain seperti Code Syntax Highlighting dan Prettier. Jadi hal yang wajar untuk menggunakan alat yang pada dasarnya memberikan semua itu secara gratis. Sebagai solusi yang dikompilasi ia memberikan DX (Developer Experience) yang baik. Jadi kenapa harus menyusahkan diri dengan custom Syntax DSLs ketika kamu bisa menggunakan pilihan yang didukung secara luas?"
    }), "\n", jsxs(_components.h2, {
      id: "kompilasi-jsx",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#kompilasi-jsx",
        children: "#"
      }), "Kompilasi JSX"]
    }), "\n", jsx(_components.p, {
      children: "Rendering melibatkan prakompilasi template-template JSX kedalam kode native js yang dioptimalkan. Konstruksi dari kode JSX:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Elemen-elemen Template DOM yang dikloning pada setiap instansiasi"
      }), "\n", jsxs(_components.li, {
        children: ["Serangkaian deklarasi referensi hanya menggunakan ", jsx(_components.code, {
          children: "firstChild"
        }), " dan ", jsx(_components.code, {
          children: "nextSibling"
        })]
      }), "\n", jsx(_components.li, {
        children: "Komputasi fine-grained untuk memperbarui elemen-elemen yang telah dibuat."
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["Pendekatan ini lebih berkinerja dan menghasilkan kode yang lebih sedikit daripada ketika kita membuat tiap elemen, satu per satu, dengan ", jsx(_components.code, {
        children: "document.createElement"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "atribut-atribut-dan-props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#atribut-atribut-dan-props",
        children: "#"
      }), "Atribut-Atribut dan Props"]
    }), "\n", jsx(_components.p, {
      children: "Solid mencoba untuk mencerminkan konvensi HTML sebisa mungkin termasuk kasus insensitifitas dari atribut."
    }), "\n", jsxs(_components.p, {
      children: ["Mayoritas dari semua attribut pada elemen asli dari JSX telah terset sebagai attribut DOM. Nilai-nilai statis dibangun langsung ke dalam template yang dikloning. Tapi ada beberapa pengecualian seperti ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), " yang menyediakan fungsionalitas tambahan."]
    }), "\n", jsxs(_components.p, {
      children: ["Namun, elemen-elemen kustom (dengan pengecualian dari native built-in) default ke properti saat dinamis. Ini untuk menangani tipe-tipe data yang lebih kompleks. Ia melakukan konversi ini dengan mengubah nama-nama attribute snake case standar (seperti ", jsx(_components.code, {
        children: "some-attr"
      }), ") menjadi camel case (seperti ", jsx(_components.code, {
        children: "someAttr"
      }), ")."]
    }), "\n", jsxs(_components.p, {
      children: ["Namun, hal yang memungkinkan untuk mengontrol perilaku ini secara langsung dengan namespace directives. Kamu bisa memaksanya mejadi attribute dengan ", jsx(_components.code, {
        children: "attr:"
      }), " atau prop dengan ", jsx(_components.code, {
        children: "prop:"
      })]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<my-element ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "UniqACC"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":title={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "title"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Catatan:"
        }), " Atribut statis dibuat sebagai bagian dari template html yang telah dikloning. Ekspresi-ekspresi tetap dan dinamis akan diaplikasikan di urutan binding JSX. Walau ini mungkin baik-baik saja di sebagian besar elemen-elemen DOM, ada beberapa seperti elemen input dengan ", jsx(_components.code, {
          children: "type='range'"
        }), ", dimana urutan sangatlah penting. Ingat hal ini ketika kamu mem-binding elemen-elemen."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "entry",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#entry",
        children: "#"
      }), "Entry"]
    }), "\n", jsxs(_components.p, {
      children: ["Cara termudah untuk memasang Solid adalah dengan mengimpor ", jsx(_components.code, {
        children: "render"
      }), " method dari ", jsx(_components.code, {
        children: "solid-js/web"
      }), ". ", jsx(_components.code, {
        children: "render"
      }), " membutuhkan fungsi sebagai argumen pertamanya dan mounting container sebagai argumen keduanya dan akan mengembalikan sebuah method disposal. ", jsx(_components.code, {
        children: "render"
      }), " secara otomatis membuat root reaktif dan akan menangani rendering ke dalam container mountnya. Untuk performa yang terbaik gunakan elemen yang tidak memiliki turunan."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"main\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Penting"
        }), " Argumen pertama haruslah sebuah fungsi. Jika tidak, Solid tidak akan bisa melacak dan meng-schedule sistem reaktifnya dengan baik. Kesalahan yang sederhana ini dapat menyebabkan Effect kamu tidak dapat bekerja."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "komponen-komponen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#komponen-komponen",
        children: "#"
      }), "Komponen-komponen"]
    }), "\n", jsx(_components.p, {
      children: "Komponen-komponen di Solid hanyalah fungsi-fungsi yang memiliki nama dengan PascalCase (huruf awal yang dikapitalisasi). Argumen pertamanya adalah objek properti dan mengembalikan node-node asli DOM."
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n);\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Karena semua node-node JSX adalah sebuah node-node asli DOM, responsibilitas dari komponen-komponen tingkat atas hanyalah menambahkannya ke DOM."
    }), "\n", jsxs(_components.h2, {
      id: "props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#props",
        children: "#"
      }), "Props"]
    }), "\n", jsxs(_components.p, {
      children: ["Sama halnya seperti React, Vue, Angular dan framework-framework lainnya, Solid memperbolehkan kamu untuk menentukan properti di komponen-komponen kamu untuk dioper ke turunan dari komponen-komponennya. Pada contoh dibawah, parent mengoper string \"Hello\" ke komponent ", jsx(_components.code, {
        children: "Label"
      }), " melalui properti ", jsx(_components.code, {
        children: "greeting"
      }), "."]
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Pada contoh diatas, nilai yang terset di ", jsx(_components.code, {
        children: "greeting"
      }), " adalah nilai statis, tapi kita juga bisa menset nilai yang dinamis. Sebagai contoh:"]
    }), "\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: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [greeting, setGreeting] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello\""
        }), ");\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{greeting()}"
            }), ">"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n  );\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Komponen-komponen dapat mengakses properti-properti yang dioper ke komponen tersebut melalui argumen ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\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: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Tidak seperti beberapa framework lainnya, kamu tidak bisa menggunakan \"object destructuring\" pada ", jsx(_components.code, {
        children: "props"
      }), " dari komponen. Ini karena objek ", jsx(_components.code, {
        children: "props"
      }), ", di belakangnya, bergantung kepada getter-getter objek untuk secara malas mengambil nilai-nilainya. Menggunakan \"object destructuring\" akan menghancurkan reaktifitas pada objek ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Contoh dibawah ini menunjukkan cara yang \"benar\" untuk mengakses props di Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Disini, `props.name` akan memperbarui seperti yang kamu ekspektasikan"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Contoh dibawah ini menunjukkan cara yang tidak benar untuk mengakses props di Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Ini buruk"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Disini, `props.name` tidak akan memperbarui (yang berarti tidak reaktif) karena dia destructure ke `name` variabel"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "{ name }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Meskipun objek ", jsx(_components.code, {
        children: "props"
      }), " terlihat seperti objek biasa ketika kamu menggunakannya (dan pengguna TypeScript mungkin akan mengatakan itu typed seperti objek normal pada umumnya), tapi nyatanya dia reaktif - sedikit mirip dengan Signal. Ini memiliki beberapa implikasi."]
    }), "\n", jsx(_components.p, {
      children: "Karena tidak seperti kebanyakan framework-framework JSX, fungsi komponen di Solid hanya untuk di eksekusi satu kali (bukan setiap siklus render), contoh berikut tidak akan bekerja seperti yang kita ekspektasikan."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\n\n  ", 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"
            }), ">"]
          }), "{value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Form"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [value, setValue] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ");\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "BasicComponent"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "value"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{value()}"
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "oninput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{(e)"
            }), " =>"]
          }), " setValue(e.currentTarget.value)} />\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n  );\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Di contoh ini, apa yang kita mungkin ingin terjadai adalah agar ", jsx(_components.code, {
        children: "BasicComponent"
      }), " bisa memunculkan nilai saat ini yang di ketikkan ke ", jsx(_components.code, {
        children: "input"
      }), ". Namun, sebagai pengingat, fungsi ", jsx(_components.code, {
        children: "BasicComponent"
      }), " hanya akan tereksekusi satu kali saja ketika komponennya pertama kali dibuat. Di saat ini (saat pembuatan), ", jsx(_components.code, {
        children: "props.value"
      }), " akan sama saja dengan ", jsx(_components.code, {
        children: "''"
      }), ". Ini berarti ", jsx(_components.code, {
        children: "const value"
      }), " di ", jsx(_components.code, {
        children: "BasicComponent"
      }), " akan menjadi ", jsx(_components.code, {
        children: "'default'"
      }), " dan tidak akan pernah ter-update. Walau mungkin objek ", jsx(_components.code, {
        children: "props"
      }), " itu reaktif, mengakses props di ", jsx(_components.code, {
        children: "const value = props.value || 'default';"
      }), " adalah diluar lingkup dari observable Solid, jadi dia tidak akan secara otomatis ter-evaluasi ulang ketika props terganti."]
    }), "\n", jsx(_components.p, {
      children: "Terus bagiamana kita memperbaiki masalah ini?"
    }), "\n", jsxs(_components.p, {
      children: ["Yah, secara umum, kita perlu mengakses ", jsx(_components.code, {
        children: "props"
      }), " ditempat dimana Solid dapat meng-observenya. Biasanya ini berarti didalam JSX atau didalam ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createEffect"
      }), ", atau thunk(", jsx(_components.code, {
        children: "() => ..."
      }), "). Berikut salah satu solusi yang akan bekerja sesuai harapan kita:"]
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", 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"
            }), ">"]
          }), "{props.value || \"default\"}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Ini, secara ekuavilen, dapat di hoist menjadi sebuah fungsi:"
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\n\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Pilihan lain, jika kamu memiliki komputasi yang kompleks atau expensive, adalah dengan menggunakan ", jsx(_components.code, {
        children: "createMemo"
      }), ". Sebagai contoh:"]
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Atau menggunakan sebuah bantuan"
    }), "\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: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  props = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), " }, props);\n\n  ", 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"
            }), ">"]
          }), "{props.value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Sebagai peringatan, contoh berikut ini ", jsx(_components.em, {
        children: "tidak"
      }), " akan bekerja:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// buruk"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": valueProp } = props;\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// buruk"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valueProp = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n  ", 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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Komponen-komponen dari Solid adalah bagian kunci dari performanya. Pendekatan Solid yaitu, \"Menghilangkan\" (\"Vanishing\") Komponen-komponen, dapat dibuat dengan mengevaluasi secara malas propertinya. Daripada mengevaluasi ekspresi prop secara langsung dan meneruskan nilainya, eksekusi akan di tahan sampai properti di akses didalam turunannya. Dengan begitu kita menghambat eksekusi sampai momen terakhir, biasanya tepat saat binding DOM terjadi, dan memaksimalkan performa. Ini juga meratakan hirearki dan menghilangkan kebutuhan untuk memelihara susunan Komponen-komponen."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " prop1=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), " prop2={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), "} />;\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// kira-kira terkompilasi ke:"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// kita meng-untrack badan komponen untuk mengisolasinya dan menghindari update yang mahal"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "({\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), ",\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// ekspresi dinamis jadi kita membungkusnya di dalam getter"
        }), "\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\n      ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), ";\n    },\n  })\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Untuk membantu memelihara reaktifitas, Solid mempunya beberapa fungsi bantuan untuk prop:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// default props"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Smith\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// clone props"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " newProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// merge props"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// split props into multiple props objects"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, others] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"className\""
        }), "])\n<div {...others} className={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cx"
        }), "(local.", jsx(_components.span, {
          className: "hljs-property",
          children: "className"
        }), ", theme.", jsx(_components.span, {
          className: "hljs-property",
          children: "komponen"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "turunan-children",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#turunan-children",
        children: "#"
      }), "Turunan (Children)"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid menangani JSX Children mirip seperti React. Satu child adalah satu nilai di ", jsx(_components.code, {
        children: "props.children"
      }), " dan banyak children akan di handel melalui nilai-nilai array. Biasanya, kamu akan mengoper mereka melalui view JSX. Tetapi, jika kamu mau berinteraksi dengan mereka metode yang kami sarankan adalah menggunakan bantuan ", jsx(_components.code, {
        children: "children"
      }), " dimana akan menyelesaikan setiap downstream control flows dan mengembalikan sebuah memo."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// single child"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "class"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"label\""
            }), ">"]
          }), "Hi, { props.children }", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), "Josie", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// multi child"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "First", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n  {state.expression}\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// map children"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.children}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// modify and map children using helper"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// children helper memoizes value and resolves all intermediate reactivity"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " memo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " children = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "memo"
        }), "();\n    children.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "c"
          }), ") =>"]
        }), " c.", jsx(_components.span, {
          className: "hljs-property",
          children: "classList"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"list-child\""
        }), "))\n  })\n  ", 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: "ul"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{memo()}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "Penting:"
      }), " Solid memperlakukan child tags sebagai ekspresi yang expensive dan membungkus mereka sama seperti ekspresi-ekspresi reaktif dinamis. Ini berarti mereka ter-evaluasi secara malas ketika ", jsx(_components.code, {
        children: "props"
      }), " diakses. Hati-hati ketika mengakses mereka berkali-kali atau men-destructure ditempat sebelum kamu menggunakan mereka di tampilannya. Ini karena Solid tidak mempunya kemewahan dari membuat node-node Virtual DOM sebelum waktunya lalu melakukan diffing ke mereka, jadi resolusi dari ", jsx(_components.code, {
        children: "props"
      }), " ini adalah harus malas dan deliberate. Gunakan fungsi bantuan ", jsx(_components.code, {
        children: "children"
      }), " jika kamu berharap untuk melakukan ini karenaia akan me-memoize mereka."]
    })]
  });
}
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=rendering-28013585.js.map
