Virtual component never unmounts

[lucaseverett]

I've found an issue when using virtual components. The teardown function returned from useEffect is never invoked. Also, state remains after a virtual component is unmounted.

The following sandbox uses the same function as both a real component and a virtual component.

When showing/hiding the real component, the count is reset, as expected.
However, when showing/hiding the virtual component, the count remains the same.

Also, as you can see from console.log, the virtual counter's useEffect teardown is never invoked.

https://codesandbox.io/s/mzvrmj2z99

I noticed issue #42, but I don't know if this is related, so I created a new issue.

[nicolasparada]

Oh, so that was it.
I was having problems to integrate haunted with my router and showing a loader between page navigations. The loader didn't disappear on a second time.

[matthewp]

@nicolasparada Just out of curiosity, why are you using virtual components? What's the appeal to you? Again, just curious because I don't use them personally :)

Thanks for the sample @lucaseverett! I'll take a look at this tomorrow. Can't commit on a fix but having a sample makes it 1000x easier!

[nicolasparada]

Not much. I'm not calling these components with the tag name but with the function. I don't need the connected/disconnectedCallback if I'm using useEffect. And I still cannot get around shadow DOM. I like my CSS to cascade.

Virtual components are more simple 🙂

[nicolasparada]

I'm mean... I'm doing all in JavaScript so is no much difference doing:

html`
  <some-component .prop=${value}></some-component>
`

Than:

html`
  ${SomeComponent({ prop: value })}
`

[nicolasparada]

I don't need the tag name is what I'm trying to say.

[matthewp]

@nicolasparada Would you be more included to use components if you didn't have to define a tag name?

import { define, component } from 'haunted';

define(component(() => html` ... `))

Where define is a new thing that doesn't exist yet :)

[nicolasparada]

Not really. withHooks is all I need 🙂

[matthewp]

I think I have a fix for this. Working on test. Might be tomorrow before its in.