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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Solids Reaktivität ist synchron, was bedeutet, dass das DOM in der nächsten Zeile nach eine Änderung bereits aktualisiert wurde. Und meistens ist das so auch genau richtig, da Solids granulares Rendering nur eine Weiterleitung der Aktualisierungen im reaktiven System ist. Unzusammenhängende Änderungen, die jeweils etwas rendern sind nicht notwendigerweise verschwendete Mühe."
    }), "\n", jsxs(_components.p, {
      children: ["Aber was, wenn die Änderungen zusammengehören? Solids ", jsx(_components.code, {
        children: "batch"
      }), "-Helfer erlaubt es uns, mehrere Änderungen einzureihen, um sie dann alle zusammen auszuführen, bevor die Beobachter benachrichtig werden. Innerhalb dieser Reihe werden aktualisierte Signale nicht weitergeleitet, bis sie fertig ist."]
    }), "\n", jsxs(_components.p, {
      children: ["In diesem Beispiel weisen wir beide Namen beim Klick auf den Knopf zu und das löst das aktualisierte Rendering zwei mal aus. Man kann die Log-Einträge in der Konsole sehen, wenn man den Knopf drückt. Also schachteln wir die ", jsx(_components.code, {
        children: "set"
      }), "-Aufrufe in eine batch."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [" ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "updateNames"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n    ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Button Clicked\""
        }), ");\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "batch"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n      ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setFirstName"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "firstName"
        }), "() + ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"n\""
        }), ");\n      ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setLastName"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "lastName"
        }), "() + ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"!\""
        }), ");\n    })\n  }\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Und das war's schon. Jetzt aktualisieren wir nur noch einmal für beide Änderungen."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-2a2a08a1.js.map
