+ {/* Warning banner */}
+
+
+ ⚠️ ADVANCED DEMO - NOT RECOMMENDED FOR PRODUCTION ⚠️
+
+
+ This demonstrates interpretManual() which requires manual cleanup.
+ Use interpret() instead for automatic lifecycle management.
+
+
+
+
+
+
+ Lifecycle Log
+
+
+
+ {logs.length === 0 ? (
+
Logs will appear here...
+ ) : (
+ logs.map((log, i) => (
+
+
+ {log.timestamp.toLocaleTimeString()}
+
+ {log.message}
+
+ ))
+ )}
+
+
+
+ interpretManual() Demo
+
+
+ This counter has an activity that ticks every 100ms. Watch what happens when you stop/restart.
+
+
+ {/* Counter Display */}
+
+ {isStopped && (
+
+ ACTOR STOPPED - Activity interrupted!
+
+ )}
+
+
{count}
+
+ Ticks: {tickCount} {!isStopped && (counting...)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Comparison Box */}
+
+
+
✅ interpret() (Recommended)
+
+ - • Automatic cleanup via Scope
+ - • No risk of memory leaks
+ - • Works great with atoms
+ - • Simpler code
+
+
+
+
⚠️ interpretManual() (This demo)
+
+ - • ~1.6x faster actor creation
+ - • YOU must call actor.stop()
+ - • Risk of memory leaks
+ - • Complex lifecycle code
+
+
+
+
+ {/* Lifecycle Log */}
+
+
+ {/* Code Example */}
+
+
Required Cleanup Pattern:
+
+{`// In your React component:
+useEffect(() => {
+ initializeActor(); // Create with interpretManual()
+ return () => {
+ cleanupActor(); // MUST call actor.stop() here!
+ };
+}, []);
+
+// If you forget cleanupActor(), the actor LEAKS:
+// - Activities keep running
+// - Timers keep firing
+// - Memory never freed`}
+
+
+