DEV Community

Cover image for Episode 23/51: TanStack Query in Angular, Alex Rickabaugh on Signals
ng-news for This is Angular

Posted on

Episode 23/51: TanStack Query in Angular, Alex Rickabaugh on Signals

A Twitter Space session hosted by Daniel Glejzner, had some very insightful discussions on TanStack's Query version for Angular. Alex Rickabaugh on best practices regarding input setters, change detection runs, and Signals in general.

TanStack Query

TanStack is a suite of libraries and well-known in React. Tan Query, probably the most popular one, is now available in Angular as an experimental mode.

Tan Query manages the data-fetching part but also caching, synchronization and other things.

Daniel Glejzner hosted a Twitter Space where you could get a first impression. The discussion centered on whether Tan Query is a state management library or something else.

Dominik Dorfmeister, co-maintainer of Tan Query, suggested that there are two different types of states. There is a state which only runs on the client and server state.
Server state is asynchronous, needs synchronization, and the client doesn't fully control it.

Tan Query was made for the server state. For client state, one of the common state management libraries, like NgRx, are a better fit.

Alex Rickabaugh at Angular Nation

Alex Rickabaugh, Angular framework lead, was a guest at AngularNation. It was a must-watch episode, especially the discussions after his talk.

Alex explained in detail the reasons for Signals and created a form example. He showed that the main problem is that our model updates don't always follow the top-down change detection approach.

The common error we get here is the "Expression has changed after it was checked". We can work around it with asynchronous tasks, but there are still some obstacles, like with OnPush.

Signals will fix this.


In the discussion afterwards, Alex discouraged the usage of input setters. The problem is that Angular doesn't guarantee the order when multiple input properties get updated at once.
The recommended approach is still to use the hook ngOnChanges:

Rethinking Reactivity w/ Alex Rickabaugh | Dec '23 | AngularNation.net - YouTube

Want to join our Angular discussions live? Act fast for an entire year of live events and group mentoring, cheaper than a single conference ticket! 🤑👇http...

favicon youtube.com

In terms of performance, fine-grained change detection might provide the best solution. In Alex' experience, it is almost never the case, that the change detection run itself is the bottleneck. Usually, it is that it runs too often. Again, with Signals, that problem is very likely to go away:

Rethinking Reactivity w/ Alex Rickabaugh | Dec '23 | AngularNation.net - YouTube

Want to join our Angular discussions live? Act fast for an entire year of live events and group mentoring, cheaper than a single conference ticket! 🤑👇http...

favicon youtube.com

Top comments (0)