DEV Community

Cover image for Episode 23/44: effect() in developer preview, local change detection with Signals
ng-news for This is Angular

Posted on

2

Episode 23/44: effect() in developer preview, local change detection with Signals

The effect() function became developer preview again. A "Special Angular Event" is scheduled for 6. November. Angular 17 will support limited local change detection.

Special Event

Next week's episode will likely be about Angular 17. The Angular team announced a live stream for today, 6th November, titled it as "Special Event", and changed its logo on YouTube and X to a question mark.

You definitely want to tune in or watch the recording later.

Developer Preview for effect()

Signals will become stable in 17. Since last week, that statement is not true anymore. The effect() function has been set back to developer preview.

According to the commit message, there have been some issues when we call some functions of the Angular API inside an effect.

Local Change Detection in Angular 17

Signal Components will have fine-grained change detection, meaning that Angular doesn't have to traverse and check through the complete component tree all the time. Unfortunately, it will not be available in 17.

Nevertheless, we will get something which is close to a Signal Component in 17.

If we currently use OnPush, then the component and all its parent components are marked as dirty as well. So the change detection has to check all of them.

In 17, if we use a Signal with OnPush, and that signal changes, then only the component marked as dirty is checked and its parents (if also OnPush) are skipped.

For more information, check out Matthieu Riegler's article and his visual demo, which is based on Daniel Wiehl's former work. Alternatively, you can also read about the commit log at.

perf(core): Update LView consumer to only mark component for check #52302

This commit updates the reactive template and host binding consumers to only mark their declaration components for refresh, but not parents/ancestors.

This also updates the AfterViewChecked hook to run when a component is refreshed during change detection but its host is not. It is reasonable to expect that the ngAfterViewChecked lifecycle hook will run when a signal updates and the component is refreshed. The hooks are typically run when the host is refreshed so without this change, the update to not mark ancestors dirty would have caused ngAfterViewChecked to not run.

resolves #14628 resolves #22646

resolves #34347 - this is not the direct request of the issue but generally forcing change detection to run is necessary only because a value was updated that needs to be synced to the DOM. Values that use signals will mark the component for check automatically so accessing the ChangeDetectorRef of a child is not necessary. The other part of this request was to avoid the need to "mark all views for checking since it wouldn't affect anything but itself". This is directly addressed by this PR - updating a signal that's read in the child view's template will not cause ancestors/"all views" to be refreshed.

New Releases

We had new minor version releases such as Cypress 13.4 and PrimeNg 17.6.

Cypress 13.4

PrimeNg 17.6

JHipster, a popular framework/platform, for full-stack development with Spring had with version 8 a new major release.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay