Ionic-Angular lifecycle vs Angular signals

I'm following an old guide about building mobile apps using ionic with angular. In there it's explained that because of ionic page caching I might have some side effects when it comes to state management, however I'm not experiencing these side effects using signal.

Here's a code example

export class RecipesPage {
  private recipesService = inject(RecipesService);

  recipes = this.recipesService.getRecipes(); //This returns a signal
}

From this page I can navigate into a recipe-detail page and in there I can delete any recipe; after doing that I'm redirected back to recipe page. After deleting a recipe, I see that the list of recipes is updated, however in this old guide it's suggested to handle state management inside ionic hook 'ionViewWillEnter' to avoid side effects.

So my question is, due to signal, is still needed to handle state management using ionic hooks, or modern tools like signals or reactive services have changed this behavior?

With the introduction of signals, we can create derived state, which gets rid of a lot of code that we usually write inside the hooks, be it Angular or Ionic.

So below are the tools of reactive signals.

computed:

Use this, when you want to derive a state; for example, the page title changes based on a specific date. use computed to derive this state, instead of writing a logic on the hooks to do this.

isNew = signal(false);
title = computed(() => this.isNew() ? 'Create New Item' :  'Edit Item');

Linked Signal:

Works the same as computed but the state can be modified, wheras computed cannot be modified, it is read only.

isNew = signal(false);
title = linkedSignal(() => this.isNew() ? 'Create New Item' :  'Edit Item');

constructor() {
  this.title.set('something random');
}

Data binding:

1. input -> similar to @Input but can be used to derive state using computed and linkedSignal.
2. model -> similar to input signal, but is specifically used for two way data binding of a property with it's parent component.

Reactive API:

We can also trigger API through these signals. We have the Resource API contains the resources for doing this.

1. resource
2. rxResource
3. httpResource

effect:

This is used to trigger side effects: for example, storing in local storage, updating the URL, updating the DOM on state change. Most of the time, what you want to achieve can be done without effect and using other signal APIs, so use this one with caution.

The effect will fire when the signals inside are updated.

isNew = signal(false);
title = linkedSignal(() => this.isNew() ? 'Create New Item' :  'Edit Item');

constructor() {
  effect(() => {
    console.log('the title was changed', this.title());
  });
}

Reactive programming get's rid of most of the code in hooks and improves the code readability.

Head to angular.dev to know more.