var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, batch } from \"solid-js\";\n\nconst App = () => {\n  const [firstName, setFirstName] = createSignal(\"John\");\n  const [lastName, setLastName] = createSignal(\"Smith\");\n  const fullName = () => {\n    console.log(\"Running FullName\");\n    return `${firstName()} ${lastName()}`\n  } \n  const updateNames = () => {\n    console.log(\"Button Clicked\");\n    setFirstName(firstName() + \"n\");\n    setLastName(lastName() + \"!\");\n  }\n  \n  return <button onClick={updateNames}>My name is {fullName()}</button>\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, batch } from \"solid-js\";\n\nconst App = () => {\n  const [firstName, setFirstName] = createSignal(\"John\");\n  const [lastName, setLastName] = createSignal(\"Smith\");\n  const fullName = () => {\n    console.log(\"Running FullName\");\n    return `${firstName()} ${lastName()}`\n  } \n  const updateNames = () => {\n    console.log(\"Button Clicked\");\n    batch(() => {\n      setFirstName(firstName() + \"n\");\n      setLastName(lastName() + \"!\");\n    })\n  }\n  \n  return <button onClick={updateNames}>My name is {fullName()}</button>\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		}
	]
};
var markdown = "Solid's reactivity is synchronous which means, by the next line after any change, the DOM will have updated. And for the most part this is perfectly fine, as Solid's granular rendering is just a propagation of the update in the reactive system. Unrelated changes \"rendering\" twice don't actually mean wasted work.\n\nWhat if the changes are related? Solid's `batch` helper allows to queue up multiple changes and then apply them all at the same time before notifying their observers. Within the batch, updated Signal values are not committed until completion.\n\nIn this example, we are assigning both names on a button click and this triggers our rendered update twice. You can see the logs in the console when you click the button. So let's wrap the `set` calls in a batch.\n\n```js\n const updateNames = () => {\n    console.log(\"Button Clicked\");\n    batch(() => {\n      setFirstName(firstName() + \"n\");\n      setLastName(lastName() + \"!\");\n    })\n  }\n```\nAnd that's it. Now we only notify once for the whole changeset.";
var reactivity_batch = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { reactivity_batch as default, lesson, markdown, solved };
