fix: call `<svelte:component>` update to `this` only when it's dirty (#4192)

Closes #4129

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -418,6 +418,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			const switch_props = block.get_unique_name('switch_props');
 
 			const snippet = this.node.expression.manipulate(block);
+			const dependencies = this.node.expression.dynamic_dependencies();
 
 			if (has_css_custom_properties) {
 				this.set_css_custom_properties(block, css_custom_properties_wrapper, css_custom_properties_wrapper_element, is_svg_namespace);
@@ -468,8 +469,13 @@ export default class InlineComponentWrapper extends Wrapper {
 					? b`@insert(${tmp_anchor}.parentNode, ${css_custom_properties_wrapper}, ${tmp_anchor});`
 					: b`@insert(${parent_node}, ${css_custom_properties_wrapper}, ${tmp_anchor});`);
 
+			let update_condition = x`${switch_value} !== (${switch_value} = ${snippet})`;
+			if (dependencies.length > 0) {
+				update_condition = x`${block.renderer.dirty(dependencies)} && ${update_condition}`;
+			}
+
 			block.chunks.update.push(b`
-				if (${switch_value} !== (${switch_value} = ${snippet})) {
+				if (${update_condition}) {
 					if (${name}) {
 						@group_outros();
 						const old_component = ${name};

test/runtime/samples/dynamic-component-dirty/_config.js

@@ -0,0 +1,24 @@
+const calls = [];
+export default {
+	props: {
+		calls
+	},
+
+	before_test() {
+		calls.length = 0;
+	},
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelector('button');
+
+		assert.deepEqual(calls.length, 1);
+
+		const event = new window.MouseEvent('click');
+		await buttons.dispatchEvent(event);
+
+		assert.deepEqual(calls.length, 1);
+
+		component.current_path = 'bar';
+		assert.deepEqual(calls.length, 2);
+	}
+};

test/runtime/samples/dynamic-component-dirty/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	export let current_path = 'foo';
+	export let calls;
+	let i = 0;
+	function getComponent(path) {
+		calls.push(path);
+		return null;
+	}
+	function onClick() {
+		i = i + 1;
+	}
+</script>
+
+<svelte:component this={getComponent(current_path)} />
+<button on:click={onClick}>click me</button>
+{i}