Change detection

One page, one turn at a time#

A live page owns its component tree, zone, effect scheduler, and page-scoped beans. A turn acquires its lock, binds that context, runs the work, runs change detection, and collects HTML patches.

Initial rendering, browser events, and forked completions are all turns. Turns from one page never overlap. Different pages can execute concurrently on virtual threads. Rendering sibling subtrees within a page is sequential.

Default and OnPush#

In zone mode, every turn ends in a tick. Default views re-render. OnPush views update when an input changes, an event fires inside the view, a signal read by it changes, or markForCheck is called.

@Component(selector = "app-user-card",
           templateUrl = "user-card.component.html",
           changeDetection = ChangeDetectionStrategy.ON_PUSH)
public class UserCardComponent {
    @Input public User user;
}

Choose zoneless mode#

In zoneless mode, only dirty views re-render. Signal reads connect each template to its dependencies, and writes mark those views dirty. Use ChangeDetectorRef.current() inside a constructor or hook for markForCheck, detectChanges, detach, and reattach.

jaspring:
  change-detection: zoneless
  stability-timeout: 300ms

From effects to patches#

Effects run before views during each tick. A tick repeats while effects or renders dirty more state, with a limit of ten passes. Jaspring does not implement Angular’s development-only expression-changed second pass.

The server caches each component’s rendered HTML. After a turn, the topmost changed views become patches. The browser morphs those HTML fragments into the live document rather than replacing the entire page.