Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Array mutation doesn't update #2362

Closed
asyncmax opened this issue Apr 6, 2019 · 5 comments

Comments

@asyncmax
Copy link

commented Apr 6, 2019

First of all, I finished v3 tutorial and Svelte is amazing. Thanks for making this.
I am exploring Svelte's internals and found a behavior that I couldn't understand.

https://v3.svelte.technology/repl?version=3.0.0-beta.22&gist=1d7388842c1b334366fd60f53fc5c2d9

<script>
  let items = [1, 2];
  let data = {count: 1};

  function add() {
    items.push(items.length + 1);
  }

  function inc() {
    data.count++;
  }
</script>

<ul>
  {#each items as item}
    <li>Item: {item}</li>
  {/each}
</ul>

<button on:click={add}>Add</button>

<div>Count: {data.count}</div>

<button on:click={inc}>Inc</button>

In default immutable: false mode, The array mutation doesn't update whereas object mutation does. Is this by design? I am using 3.0.0-beta.22.

@Panya

This comment has been minimized.

Copy link
Contributor

commented Apr 6, 2019

See the issue #2243

@Conduitry

This comment has been minimized.

Copy link
Member

commented Apr 6, 2019

Yep, this is by design. Svelte doesn't treat .push() calls differently than any other method calls on object - none of them will cause a re-render of that data. You can use items = items; which will get compiled away and trigger an update. This just hasn't made its way into the tutorial and API docs yet.

@Conduitry Conduitry closed this Apr 6, 2019

@asyncmax

This comment has been minimized.

Copy link
Author

commented Apr 6, 2019

Thanks, guys.

I momentarily thought arrays might deserve special treatment, considering the array mutation is such a common pattern, but realized it is straightforward concept once we learn why. I also love the workaround - simple and intuitive.

@Cweili

This comment has been minimized.

Copy link

commented May 8, 2019

Yep, this is by design. Svelte doesn't treat .push() calls differently than any other method calls on object - none of them will cause a re-render of that data. You can use items = items; which will get compiled away and trigger an update. This just hasn't made its way into the tutorial and API docs yet.

This may seem odd for array mutation, but it's a reasonable design.

@AltarnRain

This comment has been minimized.

Copy link

commented Jun 5, 2019

You can use:

arr = [...arr, newValue];
arr = [newValue, arr];

This will trigger an update. Unfortunately you're also creating an entirely new array. Not the neatest solution but it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.