When property changes, the fetch refires, loading appears until the fetch resolves then it displays whatever array someFetch resolved to.

I came from Vue and that plus the way Svelte does stores (literally nothing special about them) was a breath of fresh air.

    <div>
        {#await someFetch(property)}
            <div>Loading...</div>
        {:then data}
        
            {#each data as item, index}
                <div>{item}</div>
            {/each}
    
        {/await}
    </div>

Then explain what hooks do ;)

Hooks are decidedly not Javascript (even if they look like Javascript), and are a much more weird construct than {#await promise}

Javascript has no support for array-based programming.

So, hooks are not Javascript: they look like regular function calls, but:

- they can only be declared and called before rendering

- they can't be called out of order

- they cannot be called conditionally

- they have to be called a specific name to be handled correctly by React runtime

- some (but not all of them) require dependency lists that determine how they are invoked

> {#await promise} is more cryptic than any useHook function implementation.

usEffect documentation is something like 20 pages long. The use of {#await promise} is immediately understandable from the code example, and its entire documentation fits on a page and a half

I completely agree that learning them is a bit crazy, but ultimately every hook comes down to being a function execution.

How come they break Javascript semantics and execution flow?

> but ultimately every hook comes down to being a function execution.

That's really beside the point when it comes to understand what something is and using them.

{#await promise} is immediately understandable from its use.

Hooks are... well, I already said above.

wait what? since when do they break execution flow and javascript semantics?!

useEffect(function () { }); when exactly do you think the function will be called? - correct only the "framework" defines that, but that's completly normal javascript execution and semantic.

With JSX you can use native JS features instead, you only need to know the language.

For example, instead of looking up how to loop in the template syntax, you use an iterator.

  div
    Await promise={mypromise}
      div Loading…
      {res => res.map(…)}
      div Error: {err => err.message}

Isn’t it easier in both react and vue to create Await component with children=(ifwaiting, ifresolved, ifrejected) than suffering all over the code?

Edit: I messed data flow up in the error handler, wontfix but you get the idea