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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Renderizado",
  "children": [{
    "depth": 2,
    "value": "Compilación JSX",
    "children": []
  }, {
    "depth": 2,
    "value": "Atributos y Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Entrada",
    "children": []
  }, {
    "depth": 2,
    "value": "Componentes",
    "children": []
  }, {
    "depth": 2,
    "value": "Props",
    "children": []
  }, {
    "depth": 2,
    "value": "Hijos",
    "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: "renderizado",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#renderizado",
        children: "#"
      }), "Renderizado"]
    }), "\n", jsx(_components.p, {
      children: "Solid soporta templating en 3 formas JSX, Tagged Template Literals y la variable HyperScript de Solid, JSX es la forma predominante. Por qué? JSX es un DSL hecho para la compilación. Tiene una sintaxis clara, soporta TypeScript, funciona con Babel y soporta otras herramientas como Code Syntax Highlighting y Prettier. Era simplemente pragmático usar una herramienta que básicamente te otorga todo eso, gratis. Como una solución compilada provee una experiencia de desarrollo asombrosa. Porque luchar con sintaxis personalizados de DSL cuando puedes usar uno con tan amplio soporte?"
    }), "\n", jsxs(_components.h2, {
      id: "compilación-jsx",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#compilación-jsx",
        children: "#"
      }), "Compilación JSX"]
    }), "\n", jsx(_components.p, {
      children: "Renderizar involucra precompilado de templates JSX hacia código nativo de JS. El código JSX construye:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Plantillas de elementos del DOM que son clonados en cada instanciación"
      }), "\n", jsx(_components.li, {
        children: "Una serie de declaraciones referenciales usando unicamente firstChild y nextSibling"
      }), "\n", jsx(_components.li, {
        children: "Computaciones finamente detalladas para actualizar los elementos creados."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Este enfoque permite un mejor desempeño y produce menos código que creando cada elemento, uno por uno, con document.createElement."
    }), "\n", jsxs(_components.h2, {
      id: "atributos-y-props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#atributos-y-props",
        children: "#"
      }), "Atributos y Props"]
    }), "\n", jsx(_components.p, {
      children: "Solid intenta imitar las convenciones HTML tanto como sea posible incluyendo insensibilidad de mayúsculas y minúsculas de los atributos."
    }), "\n", jsxs(_components.p, {
      children: ["La mayoría de todos los atributos en los elementos nativos de JSX son establecidos como atributos del DOM. Los valores estáticos son construidos justo dentro del template que está clonado. Hay un número de excepciones como ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), " que proveen de funcionalidades extra."]
    }), "\n", jsxs(_components.p, {
      children: ["Sin embargo, los elementos personalizados (con la excepción de los incorporados de forma nativa) por default se convierten en propiedades cuando estos son dinámicos. Hace esta conversión de atributos en snake-case por camelCase por ejemplo ", jsx(_components.code, {
        children: "some-attr"
      }), " lo convierte a ", jsx(_components.code, {
        children: "someAttr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Sin embargo es posible controlar este comportamiento directamente con directivas de namespace. Puedes forzar un atributo con ", jsx(_components.code, {
        children: "attr:"
      }), " o forzar prop ", jsx(_components.code, {
        children: "prop"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<mi-elemento ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "AccUnico"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "valor"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":titulo={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "titulo"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Nota:"
        }), " Los atributos estáticos son creados com parte del template HTML que está clonado. Las expresiones fijas y dinámicas son aplicadas después en el orden vinculante del JSX. Mientras esto está bien para la mayoría de los elementos del DOM, hay algunos como los elementos de entrada con ", jsx(_components.code, {
          children: "type='range'"
        }), ", donde el orden importa. Ten esto en cuenta cuando vincules elementos."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "entrada",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#entrada",
        children: "#"
      }), "Entrada"]
    }), "\n", jsxs(_components.p, {
      children: ["La forma mas fácil de montar Solid es importando render desde 'solid-js/web'. ", jsx(_components.code, {
        children: "render"
      }), " toma una función como primer argumento y el contenedor donde se montará como el segundo y retorna un método de desechos. Este ", jsx(_components.code, {
        children: "render"
      }), " automáticamente crea una raíz reactiva y maneja el renderizado dentro del contenedor donde se monta. Para mayor desempeño usa un elemento sin hijos."]
    }), "\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: "Importante"
        }), " El primer argumento debe ser una función. De otra forma no podremos rastrear adecuadamente ni programar el sistema reactivo. Esta simple omisión hará que tus Effects no se ejecuten."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "componentes",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#componentes",
        children: "#"
      }), "Componentes"]
    }), "\n", jsx(_components.p, {
      children: "Los componentes en Solid son funciones escritas en Pascal case (Capital). Su primer argumento es un objeto props y retornan nodos DOM reales."
    }), "\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: "Padre"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "saludo"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'Hola'"
            }), ">"]
          }), "\n\t\t\t", 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\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), ">"]
          }), "\n\t", 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: "Etiqueta"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n\t", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.saludo}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n\t\t{props.children}\n\t", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Debido a que todos los nodos JSX son nodos DOM, la única responsabilidad de los Components de nivel superior es anexarlos al DOM."
    }), "\n", jsxs(_components.h2, {
      id: "props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#props",
        children: "#"
      }), "Props"]
    }), "\n", jsxs(_components.p, {
      children: ["Parecido a React, Vue, Angular y otros frameworks, Solid te permite definir propiedades en tus componentes para pasar data a los components hijos. Aquí un padre está pasando el string \"Hola\" al componente ", jsx(_components.code, {
        children: "Etiqueta"
      }), " a través de una propiedad ", jsx(_components.code, {
        children: "saludo"
      }), "."]
    }), "\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: "Padre"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "saludo"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'Hola'"
            }), ">"]
          }), "\n\t\t\t", 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\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), ">"]
          }), "\n\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["En el ejemplo de arriba, el valor establecido en ", jsx(_components.code, {
        children: "saludo"
      }), " es estático, pero también podemos establecer valores dinámicos. Por ejemplo:"]
    }), "\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: "Padre"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [saludo, setSaludo] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hola\""
        }), ");\n\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n\t\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n\t\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "saludo"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{saludo()}"
            }), ">"]
          }), "\n\t\t\t\t", 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\t\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), ">"]
          }), "\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n\t);\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Los componentes pueden acceder a las propiedades que reciben via el argumento ", 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: "Etiqueta"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\n\t", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.saludo}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n\t\t{props.children}\n\t", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["A diferencia de otros frameworks, no puedes usar desestructuración de objetos en los ", jsx(_components.code, {
        children: "props"
      }), " de un componente. Esto es debido a que el objeto ", jsx(_components.code, {
        children: "props"
      }), ", detrás de escenas, depende de Object getters para obtener valores en carga lenta. Usar la desestructuración de objetos rompe la reactividad de ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Este ejemplo muestra la manera correcta de acceder a los props en Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Aquí, `props.nombre` se actualizará como esperarías"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MiComponente"
        }), " = (", 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.nombre}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Este ejemplo muestra la forma incorrecta de acceder a los props en Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Esto está mal"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Aquí, `props.nombre` no se actualizará (no es reactivo) pues está desestructurado en `nombre`"
        }), "\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: "{ nombre }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{nombre}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Mientras el objeto de props parece un objeto normal, cuando lo usas (y los usuarios de TypeScript notarán que está tipado como un objeto normal), en realidad es reactivo - de alguna forma similar a una Signal. Esto tiene unas cuantas implicaciones."
    }), "\n", jsx(_components.p, {
      children: "Porque a diferencia de la mayoría de frameworks JSX, los componentes funcionales de Solid sólo se ejecutan una vez (en lugar de cada ciclo de renderizado), el siguiente ejemplo no funcionará como esperarías."
    }), "\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: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valor = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valor"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\n\n\t", 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"
            }), ">"]
          }), "{valor}", 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\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [valor, setValor] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ");\n\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n\t\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n\t\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ComponenteBasico"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "valor"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{valor()}"
            }), " />"]
          }), "\n\t\t\t", 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)"
            }), " =>"]
          }), " setValor(e.currentTarget.value)} />\n\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n\t);\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["En este ejemplo, lo que probablemente queremos que suceda es que el ", jsx(_components.code, {
        children: "ComponenteBasico"
      }), " muestre el valor actual escrito dentro del ", jsx(_components.code, {
        children: "input"
      }), ". Pero, como recordatorio, la función del ", jsx(_components.code, {
        children: "ComponenteBasico"
      }), " solo se ejecutará una vez cuando el componente es creado inicialmente. En este momento (en la creación), ", jsx(_components.code, {
        children: "props.valor"
      }), " será igual a ", jsx(_components.code, {
        children: "''"
      }), ". Esto significa que ", jsx(_components.code, {
        children: "const valor"
      }), " en el ", jsx(_components.code, {
        children: "ComponenteBasico"
      }), " resolverá ", jsx(_components.code, {
        children: "'default'"
      }), " y nunca se actualizará. Si bien el objeto ", jsx(_components.code, {
        children: "props"
      }), " es reactivo, acceder al valor en ", jsx(_components.code, {
        children: "const valor = props.valor || "
      }), "'default';` está fuera del ámbito observable de Solid, así que no es automáticamente re-evaluado con los props cambian."]
    }), "\n", jsx(_components.p, {
      children: "Entonces, cómo podemos corregir nuestro problema?"
    }), "\n", jsxs(_components.p, {
      children: ["Bueno, en general, necesitamos acceder a ", jsx(_components.code, {
        children: "props"
      }), " en algún lugar donde Solid pueda observarlo. Generalmente esto significa dentro del JSX o dentro de un ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createEffect"
      }), ", o un thunk(", jsx(_components.code, {
        children: "() => ..."
      }), "). Aquí se muestra una solución que funciona como se espera:"]
    }), "\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: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", 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.valor || \"default\"}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Esto, equivalentemente, puede ser elevado a una function:"
    }), "\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: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "valor"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valor"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\n\n\t", 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"
            }), ">"]
          }), "{valor()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Otra opción, si es una computación costosa, puedes usar ", jsx(_components.code, {
        children: "createMemo"
      }), ". Por ejemplo:"]
    }), "\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: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valor = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valor"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n\n\t", 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"
            }), ">"]
          }), "{valor()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "O usando un helper"
    }), "\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: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\tprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "valor"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), " }, props);\n\n\t", 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.valor}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Como recordatorio, los siguientes ejemplos ", jsx(_components.em, {
        children: "no"
      }), " funcionarán:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Mal"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "valor"
        }), ": valorProp } = props;\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valor = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valorProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n\t", 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"
            }), ">"]
          }), "{valor()}", 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: "// Mal"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "ComponenteBasico"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valorProp = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "valor"
        }), ";\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valor = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valorProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\n\t", 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"
            }), ">"]
          }), "{valor()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Los componentes de Solid son la pieza clave de su desempeño. El enfoque de \"Desvanecimiento\" de Componentes es posible por la evaluación lazy de props. En lugar de evaluar expresiones de prop inmediatamente y pasar los valores, la ejecución es diferida hasta que el prop es accedido en el hijo. Hacer esto pospone la ejecución hasta el ultimo momento, típicamente, justo en el vinculamiento con el DOM, maximizando el desempeño. Esto aplana la jerarquía y elimina la necesidad de mantener un árbol de Components."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Componente"
        }), " prop1=", jsx(_components.span, {
          className: "hljs-string",
          children: "'estático'"
        }), " prop2={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dinamico"
        }), "} />;\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Se compila burdamente en:"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// dejar de rastrear el cuerpo del componente para aislarlo y prevenir las actualizaciones costosas"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n\t", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Componente"
        }), "({\n\t\t", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"estático\""
        }), ",\n\t\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Expresión dinámica, entonces la envolvemos en un getter"
        }), "\n\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\n\t\t\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dinamico"
        }), ";\n\t\t},\n\t})\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Para ayudar a mantener la reactividad, Solid tiene un par de prop helpers:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Props default"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "nombre"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Smith\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Clonar props"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " nuevasProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Unir props"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Separar props en multiples objetos de props"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, otros] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"className\""
        }), "])\n<div {...otros} 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: "component"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "hijos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#hijos",
        children: "#"
      }), "Hijos"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid maneja los hijos JSX similar a React. Un solo hijo es un solo valor en ", jsx(_components.code, {
        children: "props.children"
      }), " y múltiples hijos se maneja mediante un arreglo de valores. Normalmente, los pasas a través de la vista JSX. Sin embargo, si quieres interactuar con ellos el método sugerido es el helper ", jsx(_components.code, {
        children: "children"
      }), " que resuelve cualquier control de flujo rio abajo y retorna un memo."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Hijo único"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Etiqueta"
        }), " = (", 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\""
            }), ">"]
          }), "Hola, { 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: "Etiqueta"
            }), ">"]
          }), 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: "Etiqueta"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Múltiples hijos"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Lista"
        }), " = (", 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: "Lista"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Nombre", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n  {state.expresion}\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Etiqueta"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Lista"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Map de hijos"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Lista"
        }), " = (", 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: "// Modificar y mappear children usando el helper"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Lista"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// El helper children memoriza el valor y resuelve toda la reactividad intermedia"
        }), "\n\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: "\"lista-hijos\""
        }), "))\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: "Importante:"
      }), " Solid trata las etiquetas de children como expresiones costosas y las envuelve de la misma manera que a las expresiones reactivas dinámicas. Esto significa que se evalúan de manera diferida los accesos a ", jsx(_components.code, {
        children: "props"
      }), ". Ten cuidado con acceder a ellos múltiples veces o desestructurarlos antes de ponerlos en la vista donde los quieras usar. Esto es porque Solid no tiene el lujo de crear nodos del DOM Virtual antes de tiempo y después compararlos, así que la resolución de estos ", jsx(_components.code, {
        children: "props"
      }), " debe ser diferida y deliberada. Usa el helper ", jsx(_components.code, {
        children: "children"
      }), " si necesitas hacer esto pues así son memorizados."]
    })]
  });
}
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-04f45b2c.js.map
