Open
Description
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