Signals in React(IV): Separating UI Effects and Data Effects with Signals

Quick Recap This article continues from the conclusion of the previous one. We will look at practical examples to understand how React and signals can complement each other in real applications. Effect Cleanup Strategies First, let’s clarify the core concept: Our effect ( createEffect ) is responsible for data/business cycles. It depends on signals and releases resources using onCleanup before re-running. React effects ( useEffect / useLayoutEffect ) are responsible for UI/DOM cycles. They depend on React snapshots (props/state) and clean up before the next commit. Practical Examples Timer Example (using createEffect ) Requirement Poll data based on an adjustable intervalMs and write the latest time into a heartbeat signal. Key idea When intervalMs changes, the old setInterval should be automatically cleared and replaced with a new one. // data/heartbeat.ts import { signal } from " ../core/signal " ; import { createEffect , onCleanup } from " ../core/effect " ; export const intervalMs