feat: Add useUnmount hook

frontend/libs/studio-hooks/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useDebounce';
 export * from './useForwardedRef';
 export * from './usePropState';
 export * from './useUniqueKeys';
+export * from './useUnmount';

frontend/libs/studio-hooks/src/hooks/useUnmount.test.ts

@@ -0,0 +1,46 @@
+import type { RenderHookResult } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
+import { useUnmount } from './useUnmount';
+
+describe('useUnmount', () => {
+  it('Does not call the function on first render', () => {
+    const fun = jest.fn();
+    renderUseUnmount(fun);
+    expect(fun).not.toHaveBeenCalled();
+  });
+
+  it('Does not call the function on rerender', () => {
+    const fun = jest.fn();
+    const { rerender } = renderUseUnmount(fun);
+    rerender({ fun });
+    expect(fun).not.toHaveBeenCalled();
+  });
+
+  it('Calls the function on unmount', () => {
+    const fun = jest.fn();
+    const { unmount } = renderUseUnmount(fun);
+    unmount();
+    expect(fun).toHaveBeenCalledTimes(1);
+  });
+
+  it('Calls the most recent function on unmount when it has rendered with different functions', () => {
+    const firstFun = jest.fn();
+    const secondFun = jest.fn();
+    const { rerender, unmount } = renderUseUnmount(firstFun);
+    rerender({ fun: secondFun });
+    unmount();
+    expect(firstFun).not.toHaveBeenCalled();
+    expect(secondFun).toHaveBeenCalledTimes(1);
+  });
+});
+
+type RenderUseUnmountProps = {
+  fun: () => void;
+};
+
+function renderUseUnmount(fun: () => void): RenderHookResult<void, RenderUseUnmountProps> {
+  const props: RenderUseUnmountProps = { fun };
+  return renderHook<void, RenderUseUnmountProps>((props) => useUnmount(props.fun), {
+    initialProps: props,
+  });
+}

frontend/libs/studio-hooks/src/hooks/useUnmount.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function useUnmount(fun: () => void): void {
+  const functionRef = useRef<() => void>(fun);
+
+  useEffect(() => {
+    functionRef.current = fun;
+  }, [fun]);
+
+  useEffect(() => () => functionRef.current(), []);
+}