Explicitly defining the dependency in the reactive declarations

inputValue = updateInputValue(value);

maybe this just comes down to general footguns with reactivity, and being aware of them as a developer.

if you put the reactive statement $: validate(inputValue); after the function updateInputValue declaration, it's working as expected:

What I think is happening is that instantiating the component is immediately running the $: reactive code, which dispatches the event synchronously, before the parent component attaches the listener.

I too have been confused by behavior like this. Perhaps a clearly defined way to isolate atomic units with synchronous reactivity would help those of us still working through the idiosyncrasies of reactivity.

For performance reasons, $: reactive blocks are batched up and run in the next microtask. This is the expected behavior. This is one of the things that we should talk about when we figure out how and where we want to have a section in the docs that goes into more details about reactivity. If you want something that updates synchronously and depends on another value, you can use a derived store: