Am I cleaning up properly or am I creating a memory leak?

[HighFunctioningSociopathSH]

I have the following snippet of code, which is written for an attempt to prevent a parent element from removing itself from the DOM as long as there is an element transitioning inside of it. I'm trying to achieve this using Svelte's features instead of relying on Promises.
To prevent creating more than one $effect, I tried the following approach, but I'm not sure whether I'm free of memory leaks here or not.
I'd be happy to know whether that's the case or not.

<script lang="ts">
  let condition = $state(false);
  let finalCondition = $state(false);
  let innerElementTransitioning = $state(true);
  let timeoutId: NodeJS.Timeout | undefined = undefined;
  let cleanupEffect: (() => void) | undefined = undefined;

  function setFinalCondition(condition: boolean) {
    cleanupEffect?.();
    clearTimeout(timeoutId);

    if (condition) {
      finalCondition = true;

      // Here I'm resetting the innerElementTransitioning variable for the sake of the example to function properly next time the
      // setFinalCondition function is called.
      innerElementTransitioning = true;
    } else if (!innerElementTransitioning) {
      finalCondition = false;
    } else {
      // Here we want to prevent the finalCondition from changing to false, as long as there is an element transitioning inside.
      let callbackFunc: (() => void) | undefined = () => {
        $effect.pre(() => {
          if (!innerElementTransitioning) finalCondition = false;
        });

        return () => {
          callbackFunc = undefined;
        };
      };
      cleanupEffect = $effect.root(callbackFunc);

      // Here I'm simulating the inner element's transition finishing after 2 seconds.
      timeoutId = setTimeout(() => {
        innerElementTransitioning = false;
      }, 2000);
    }
  }
  $inspect(finalCondition);
</script>

<button
  onclick={() => {
    setFinalCondition(!condition);
    condition = !condition;
  }}
>
  change condition
</button>

I'm cleaning up the callbackFunc passed to $effect.root by setting it to undefined, but I'm not sure whether I have to clean the $effect.root itself or not or whether there is actually any ways to do that. I'm worried that the internal logic of the $effect.root function itself might be getting called over and over again and stored somewhere in memory.

[brunnerh]

Calling the cleanup functions should generally be enough, otherwise there is a bug in the Svelte internals. Once the component is unmounted and its timers are expired, they should not be able to keep objects like the props alive.

You also usually should not need $effect.root at all, which is definitely a potential source of leakage.

When in doubt about memory issues, I recommend using the browser dev tools which usually are able to take memory snapshots and compare them, so you can see whether allocations are cleaned up correctly.

[HighFunctioningSociopathSH]

Thanks.