Lifecycle & Memory Safety

How Exhuma guarantees zero memory leaks, deterministic event listener teardowns, and observer unregistrations across all 13 supported frontend runtimes.

0 leaked listeners
0 heap slope

// 01Guarantee

The Zero-Leak Guarantee

Interactive UI components that calculate spring physics, mouse trajectories, and horizontal scroll snaps continuously register event listeners on window, document, or parent containers. In long-running Single Page Applications, failure to unregister these listeners on component unmount causes runaway memory growth.

DOM

Detached DOM Prevention

Every listener holds an ephemeral reference. On unmount, all references are nulled to allow browser garbage collection immediately.

rAF

Animation Frame Cancellation

Active requestAnimationFrame loops are cleanly canceled via cancelAnimationFrame before component destruction.

// 02Listeners

Deterministic Listener Teardown

In React and Next.js, teardowns are anchored in the return callback of useEffect with strict AbortController or removeEventListener pairing:

React / Next.js Teardown

useEffect(() => {
  const handlePointerMove = (e: MouseEvent) => {
    // 60 FPS transform calculation
  };

  window.addEventListener('mousemove', handlePointerMove, { passive: true });

  // Mandatory Teardown:
  return () => {
    window.removeEventListener('mousemove', handlePointerMove);
  };
}, [maxTilt]);

// 03Observers

ResizeObserver Disconnection

Components like CSS Masonry and Auto-Fit Grid monitor container width changes to dynamically recalculate column tracks. We guarantee immediate disconnection:

observer-cleanup.ts

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    updateColumnCount(entry.contentRect.width);
  }
});

observer.observe(containerRef.current);

// Teardown:
return () => observer.disconnect();

// 04Matrix

Framework Teardown Matrix

How each target framework contract implements lifecycle safety:

Framework	Lifecycle Cleanup Hook	Observer Disposal
React 18 / 19	useEffect() return () => {}	disconnect()
Next.js 15	useEffect() return () => {}	disconnect()
Vue 3 / Nuxt	onUnmounted(() => {})	disconnect()
Svelte 5	$effect(() => { return () => {} })	disconnect()
Angular 18+	DestroyRef.onDestroy(() => {})	disconnect()
SolidJS	onCleanup(() => {})	disconnect()
Astro	disconnectedCallback()	disconnect()
Vanilla JS	destroy() instance method	disconnect()
Flutter	@override void dispose()	_controller.dispose()

useEffect(() => { const handlePointerMove = (e: MouseEvent) => { // 60 FPS transform calculation }; window.addEventListener('mousemove', handlePointerMove, { passive: true }); // Mandatory Teardown: return () => { window.removeEventListener('mousemove', handlePointerMove); }; }, [maxTilt]);

const observer = new ResizeObserver((entries) => { for (const entry of entries) { updateColumnCount(entry.contentRect.width); } }); observer.observe(containerRef.current); // Teardown: return () => observer.disconnect();

Framework

Lifecycle Cleanup Hook

Observer Disposal

React 18 / 19

useEffect() return () => {}

disconnect()

Next.js 15

useEffect() return () => {}

disconnect()

Vue 3 / Nuxt

onUnmounted(() => {})

disconnect()

Svelte 5

$effect(() => { return () => {} })

disconnect()

Angular 18+

DestroyRef.onDestroy(() => {})

disconnect()

SolidJS

onCleanup(() => {})

disconnect()

Astro

disconnectedCallback()

disconnect()

Vanilla JS

destroy() instance method

disconnect()

Flutter

@override void dispose()

_controller.dispose()