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

First rendering when dispatch in reactivity expression #5405

Closed
ruslan-khomiak opened this issue Sep 16, 2020 · 2 comments
Closed

First rendering when dispatch in reactivity expression #5405

ruslan-khomiak opened this issue Sep 16, 2020 · 2 comments

Comments

@ruslan-khomiak
Copy link

ruslan-khomiak commented Sep 16, 2020

If we use dispatch in a reactive expression, when the component is first rendered, the dispatch event will not be handled. But if you do the same with onMount, it will work. I fixed it with await tick() before dispatch in reactivity expression. But I don't understand the bug is this or not.
What do you think of it? I didn't find anything like this in the documentation.

REPL reproduced bug with reactive expression: https://svelte.dev/repl/1055153bb575466cbcd91f38af019d1c?version=3.25.1

REPL solution with await tick: https://svelte.dev/repl/2864c5f152b14e6988328045b61f72ac?version=3.25.1

REPL everything is works with onMount: https://svelte.dev/repl/33c316946a0e4f97bbc899af151c6407?version=3.25.1

@Conduitry
Copy link
Member

Duplicate of #4470.

@TylerRick
Copy link

TylerRick commented Jan 15, 2021

In other words, this issue is about how to postpone dispatching an event containing the initial value from the Child2 component until its parent component has mounted.

Thanks for the await tick() idea. Not sure I would have thought of that solution to this problem.


To clarify, for future readers, the 3rd REPL as is isn't actually "everything working" in the same way that the 2nd REPL is. To have it dispatch an event for both the initial value and any changes from that initial value, you would need to have a reactive $ as well as the onMount that it already has. See updated REPL:

 	onMount(handleOptionChange)
	$: { handleOptionChange(); option }

But that has 2 downsides that I can see:

  1. It dispatches a duplicate event on first render — the initial one from the $: being the one that gets dispatched before parent has registered its listener. (Not sure how this could be a problem in practice, but still seems unfortunate.)
  2. it is more verbose than the await tick() trick.

So, it seems like the await tick() option is the best workaround for this problem. Are there any downsides to doing it that way? Like maybe it could cause changes to not show up immediately in certain cases because it waited until after the render was complete to dispatch?

It's hard to believe this is really the intended behavior. It just seems unintuitive and easy to forget that this is needed. Will re-read #4470 to try figure out why the current behavior might be desired/intended, but so far, I can't understand why this behavior would be desirable.

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

3 participants