Window edge removal on close

[cboon-jeff]

Just wondering how you're handling unregistering edges when you close a child Zedux window.

The way I'm currently doing it is that every route that is the top level of a window has a GracefulCloseWindow component. This component has a little state for whether it is currently 'closing' or not.
It also has an effect that sets up a listener for the Openfin 'close-requested' event.
When that first it calls setClosing(true).
All the actual content of our windows is inside an inner component that is only rendered when closing is false, so in effect this unmounts everything. We also trigger a timeout which really closes the window after a certain amount of time.

export const useGracefulCloseWindow = (timeout = defaultTimeout) => {
  const [closing, setClosing] = useState(false);
  const handleClosing = async () => {
    setClosing(true);
  };
  useEffect(() => {
    WindowHelpers.currentWindow.addListener('close-requested', handleClosing);
    return () => {
      WindowHelpers.currentWindow.removeListener('close-requested', handleClosing);
    };
  }, []);
  useEffect(() => {
    if (closing) {
      const timeoutId = setTimeout(() => {
        WindowHelpers.currentWindow.close(true);
      }, timeout);
      return () => {
        clearTimeout(timeoutId);
      };
    }
  }, [closing, timeout]);
  return closing;
};

export const GracefulCloseWindow = ({
  timeout = defaultTimeout,
  children,
  ClosingUI = <DefaultClosingUI />,
  className,
}: {
  timeout?: number;
  children: ReactNode;
  ClosingUI?: ReactNode;
  className?: string;
}) => {
  const closing = useGracefulCloseWindow(timeout);
  const Component = closing ? ClosingUI : <GracefulCloseWindowInner>{children}</GracefulCloseWindowInner>;
  return (
    <Suspense fallback={<LoadingWindow>Loading...</LoadingWindow>}>
      <Window className={className}>{Component}</Window>
    </Suspense>
  );
};

We would do this regardless as we also may want to clean up some other stuff, like send close messages to any websockets, etc.

But we have had a few occasions where we (I) accidentally used a Zedux atom outside the GracefulCloseWindow. So when a window was closed its deps were not unregistered from the store in the parent window. On reopening the same window the edges already existed, so new subscriptions for useAtomValue were not made.
This was actually masked from us in development as StrictMode meant the graph instantly got edges unregistered and then re-registered, so only showed up when we built for QA environment.

Of course this is totally my fault, but just wondering if you have a way to catch this. I was thinking it would be convenient if there was a way to call a function on the ecosystem that would remove all dependents that start with a particular id (which in my case would be the identifierPrefix passed to createRoot).

[bowheart]

Hey @cboon-jeff

used a Zedux atom outside the GracefulCloseWindow

By this do you mean in a sibling or parent component? So GracefulCloseWindow is supposed to be the top-level component in a window that ensures the React tree is properly unmounted, but there are actually components outside it?

If the full component tree isn't cleaned up, Zedux deps may not be the only problem. I'd recommend fully unmounting the React tree e.g. on beforeunload (which works in openfin):

import { createRoot } from 'react-dom/client';

const identifierPrefix = 'myPrefix';
const root = createRoot(rootEl, { identifierPrefix });

root.render(<App />);

window.addEventListener('beforeunload', () => {
  root.unmount(); // this
});

I believe this listener would run right after calling WindowHelpers.currentWindow.close(true);.

I'd expect that to fix this and can't think of a reason not to do this. It's definitely what Zedux expects. As a fallback, the answer to whether there is

a way to call a function on the ecosystem that would remove all dependents that start with a particular id

is kind of yes, but it's gonna be ugly. Zedux gives you full control over the cache, but this certainly isn't an intended use case. For this, you'd have to dig into some undocumented _-prefixed properties and mutate some stuff. Zedux's data structures are also definitely not optimized for this, so it's a potentially expensive operation if you have lots of nodes.

The mutation is fine if you know these deps are really dead. And all public _-prefixed properties are not forbidden to use, but aren't recommended and may change between minor versions. So you'd need to watch out for that when upgrading if you use them.

It would look like this:

Object.values(myEcosystem._graph.nodes).forEach((node) => {
  [...node.dependents.keys()].forEach((key) => {
    if (key.includes(`-:${identifierPrefix}`)) {
      node.dependents.delete(key);
    }
  });
});

It's also possible to destroy any nodes that now have no deps, but I'll leave it there for now. Don't use this if you can avoid it.

[cboon-jeff]

Amazing. Every time I ask you a Zedux question it just means you teach me more React 😄. Sounds like root.unmount is exactly what i'm looking for.

And just for completeness to answer your question, it was a case of accidentally reintroducing a hook that was in my Window, which is used by GracefulCloseWindow, but was not unmounted as it wrapped Component, which was the bit getting unmounted. Turns out it was a not-so-graceful approach and root.unmount will be better.