Signals in React (VI): Stale Closures, Subscription Traps, and Reactive Graph Pitfalls

Quick Overview In the previous article, we discussed: Why tearing occurs and how to guarantee tear-free subscriptions How to avoid dangling subscriptions or computed nodes when components remount due to keys Practical strategies for consistency and timing coordination when using Transition and Suspense In this article, we will go through several examples to better understand common mistakes and their solutions. Common Pitfalls Stale closures: reading outdated values in events or async callbacks Symptom Values used inside setTimeout , debounce , or Promise.then are always outdated. Cause Event handlers and async callbacks capture the snapshot from the render that created them . Fix Read the snapshot again inside the callback using peek() , or inject a getter function to avoid closure persistence. // ❌ onClick / timeout always uses "v from that render" const v = useSignalValue ( countSig ); const onClick = () => setTimeout (() => console . log ( v ), 500 ); // ✅ read the latest value at