clarify onMount return functions when combined with non-synchronous handlers #5053
Conversation
site/content/docs/03-run-time.md
Outdated
| @@ -50,6 +50,8 @@ If a function is returned from `onMount`, it will be called when the component i | |||
| </script> | |||
| ``` | |||
|
|
|||
| > Returning a function is only available for *synchronous* onMount functions. If an `async` function or `Promise` is passed to `onMount`, the returned function will **not** be called. | |||
There was a problem hiding this comment.
I do think we ought to clarify to people here how this works, but I'm not sold on this particular wording. Maybe instead just saying something about how 'the function passed to onMount needs to synchronously return a function for it to be called when the component is destroyed'? And then maybe a reminder that async functions always actually return promises.
There was a problem hiding this comment.
Updated. It's very hard to get the wording right in a concise way without requiring the user to have a very solid grounding in asynchronous functions, anonymous functions, and Promise execution order.
I think I've covered it though.
| @@ -50,6 +50,8 @@ If a function is returned from `onMount`, it will be called when the component i | |||
| </script> | |||
| ``` | |||
|
|
|||
| > This behaviour will only work when the function passed to `onMount` *synchronously* returns a value. `async` functions always return a `Promise`, and as such cannot *synchronously* return a function. | |||
There was a problem hiding this comment.
Do we want to maybe say "returns a function" rather than "returns a value"? The only thing I'd worry with about that is the ends of the two sentences sounding a bit repetitive.
There was a problem hiding this comment.
The reason I've said value in the first instance, is that I wouldn't consider this:
const myOnDestroy = function () { disposeStuff() }
onMount(async () => new Promise(r => r(myOnDestroy))
as returning a function, more returning a value. I'd want to cover people literally using promises as return values within async functions.
The second sentence refers to a concrete example.
There was a problem hiding this comment.
That's fair. This seems like a good explanation then, and there'll at least be some place in the docs to point people to about this now.
|
The note in the docs finally helped me solve the issue, but it would be nice if Svelte gave some warning when this happens. This issue took 10+ hours to debug in my project. I did not realize new event handlers were being created without destroying the old ones. So events triggered both the old and new event handlers, causing weird behavior. I almost attributed the weird behavior to something completely unrelated (my first fix related to Svelte stores turned out to be just a work-around). This PR also seems like it would have helped: #8136 |
Fixes #4927
Before submitting the PR, please make sure you do the following
npm run lint!)Tests
npm testoryarn test)