useEffect is synchronous?

[dy]

I noticed that

  let { component, useState, useEffect, State } = await import("haunted")

  let state = new State(() => {
    update();
  });

  function update() {
    state.run(() => {
      useEffect(() => { console.log(1) })
      let [s, setS] = useState(0)

      useEffect(() => setS(1), [])
      useEffect(() => console.log(2), [])
      useEffect(() => console.log(3), [])

      return;
    });
    state.runEffects()
  }

  update();

Never logs 2, 3 - is useEffect synchronous by design?

[matthewp]

Calling state.runEffects() synchronously runs the effects, yes. The State api does not include its own scheduler. The idea is that you will use some other library that contains its own scheduler (like LitElement has). When you use Haunted directly it runs effects asynchronously after the render function does. With that being said I'm confused as to why 2 and 3 don't run here.

[dy]

Another similar issue (I guess the same cause):

let { component, useEffect, useState, useMemo } = await import("haunted");

  let log = []

  function X() {
    let [s, setS] = useState(0)

    // this memo is run only once here
    useMemo(() => console.log(1))

    useMemo(() => setS(2), [])
    useMemo(() => setS(3), [])
    // or
    // useEffect(() => setTimeout(() => setS(2)), [])
    // useEffect(() => setTimeout(() => setS(3)), [])

    return null
  }

  customElements.define('x-x', component(X));
  document.body.appendChild(document.createElement("x-x"));

The console logs 1 just a single time - setS does not rerender the component.

[matthewp]

What does React do in this scenario? I know they usually discourage setting state in render that way. Usually you would do this in a useEffect.

[dy]

useMemo is the only way to synchronously run some code via deps check in react:
https://codesandbox.io/s/wonderful-sara-ymcfi
So it works like sync useEffect with result instead of destructor.

[matthewp]

Ok, I'll look into this more then.