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

Why is binding with child components rendering two times on the first load? #6590

Closed
frederikhors opened this issue Jul 29, 2021 · 8 comments

Comments

@frederikhors
Copy link

frederikhors commented Jul 29, 2021

Describe the bug

Why do I get two times the console.log()?

Reproduction

https://svelte.dev/repl/e27091c87e9f429b9eac1e3fdc6d20d3?version=3.41.0

  • App.svelte:
<script>
  import Child from './Child.svelte'  
	
  let filter = { 
    value: "hello world"
  }
	
  $: console.log(filter)
</script>

<h2>Parent:</h2> {filter.value}

<input bind:value={filter.value}>

<br><br>

<h2>Child:</h2> <Child bind:filter />
  • Child.svelte:
<script>
  export let filter = undefined
	
</script>

<input bind:value={filter.value}>

Severity

performances penalty

@Prinzhorn
Copy link
Contributor

Prinzhorn commented Jul 29, 2021

This looks like the issue I'm having (with stores though) #6298

So maybe it is a more widespread issue with bind: triggering unnecessary updates. But I just noticed it because my stores are expensive.

@motzel
Copy link

motzel commented Jul 29, 2021

Additionally, this does not happen if the filter variable is a regular string. console.log() is called only once in this case

@techniq
Copy link

techniq commented Jul 29, 2021

Related issue that was resolved - #5555

@Prinzhorn
Copy link
Contributor

Another one for the collection #5689

@sourcecaster
Copy link

Yep, this is an old bug and was described in details here: #4447.
Simplest way to reproduce:
https://svelte.dev/repl/9b44ad8378f340cb87c1960a4b9b8caa?version=3.42.1
(see console output)

If you change from object value to scalar value then bug no longer occurs.

@frederikhors
Copy link
Author

What a crazy bug!

@Florian-Schoenherr
Copy link

Simplest way to reproduce:
https://svelte.dev/repl/9b44ad8378f340cb87c1960a4b9b8caa?version=3.42.1

This even happens if you put
$: console.log(param);
into Component.svelte instead of App.svelte

@dummdidumm
Copy link
Member

Closing as duplicate of #5689

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants