Skip to content

[🐞] Qwik React never calls unmount. #7542

Open
@omerman

Description

@omerman

Which component is affected?

Qwik React

Describe the bug

I am trying to migrate from react. but I can see that unmount is never called for any of the components I mount.

I went over the source code,
the root.unmount() is never called.
I guess there should be a cleanup param usage via the useTask.
I dont have enough knowledge on react's hydration from ssr to make the change myself, because I'n not sure which edge cases I should go over.

Help please?

P.S thank you so much, qwik is amazing 🙏

//// This is a code snippet from `qwik-react` to show what I believe to be the relevant code
//// See how the `root.unmount()` invocation is missing

    // Task takes cares of updates and partial hydration
    useTask$(async ({ track }) => {
      const trackedProps = track(() => ({ ...props }));
      track(signal);

      if (!isBrowser) {
        return;
      }

      // Update
      if (internalState.value) {
        if (internalState.value.root) {
          internalState.value.root.render(
            main(slotRef.value, scopeId, internalState.value.cmp, trackedProps)
          );
        }
      } else {
        let root: Root | undefined = undefined;
        const Cmp = await reactCmp$.resolve();
        const hostElement = hostRef.value;
        if (hostElement) {
          // hydration
          if (isClientOnly) {
            root = client.createRoot(hostElement);
          } else {
            root = client.flushSync(() => {
              return client.hydrateRoot(
                hostElement,
                mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys)
              );
            });
          }
          if (isClientOnly || signal.value === false) {
            root.render(main(slotRef.value, scopeId, Cmp, trackedProps));
          }
        }
        internalState.value = noSerialize({
          cmp: Cmp,
          root,
        });
      }
    });
.....
.....

Reproduction

https://stackblitz.com/edit/github-ago3ix4p?file=src%2FReactComponent.tsx,package.json

Steps to reproduce

Run the stackblitz, the unmount console log is never called, even after the signal's value changes and we no longer render the react component.

System Info

System:
    OS: macOS 15.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 74.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.115
    Safari: 18.3
  npmPackages:
    typescript: 5.5.4 => 5.5.4 
    vite: ^6.3.2 => 6.3.2

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions