mirror of https://github.com/sveltejs/svelte
fix: prevent reactive statement reruns (#10736)
- run reactive statements only once per tick, even when they have indirect cyclic dependencies. Made possible by adding an array to the component context, which is filled with identifiers of the reactive statements, and which is cleared after all have run. Reactive statements rerunning before that will bail early if they detect they're still in the list - part of the solution is to run all reactive statements, and then all render effects, which also fixes #10597pull/10744/head
parent
f3bfb938ee
commit
74474fe085
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: prevent reactive statement reruns when they have indirect cyclic dependencies
|
@ -1,10 +1,12 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// destructure to store value
|
||||
export default test({
|
||||
html: '<h1>2 2 xxx 5 6 9 10 2</h1>',
|
||||
async test({ assert, target, component }) {
|
||||
await component.update();
|
||||
component.update();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<h1>11 11 yyy 12 13 14 15 11</h1>');
|
||||
}
|
||||
});
|
||||
|
@ -1,10 +1,12 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// destructure to store
|
||||
export default test({
|
||||
html: '<h1>2 2 xxx 5 6 9 10 2</h1>',
|
||||
async test({ assert, target, component }) {
|
||||
await component.update();
|
||||
component.update();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '<h1>11 11 yyy 12 13 14 15 11</h1>');
|
||||
}
|
||||
});
|
||||
|
@ -0,0 +1,13 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: '<button>1 / 1</button>',
|
||||
async test({ assert, target }) {
|
||||
const button = target.querySelector('button');
|
||||
button?.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<button>3 / 2</button>');
|
||||
}
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let count1 = 0;
|
||||
let count2 = 0;
|
||||
function increaseCount1() { count1++ }
|
||||
$: if(count2 < 10) { increaseCount1() }
|
||||
$: if(count1 < 10) { count2++ }
|
||||
</script>
|
||||
|
||||
<button on:click={() => count1++}>{count1} / {count2}</button>
|
Loading…
Reference in new issue