🐞[BUG]: Dynamic selector triggers before component is destroyed

[jofrly]

Affected Package

The issue is caused by package @ngxs/store@18.0.0

Is this a regression?

Yes, the previous version in which this bug was not present was: 3.8.2 which can be verified by the (reverted) commit jofrly/ngxsracecondition@1a686e6

Description

I have the following selector chain:

  @Selector([AppState])
  public static todos(state: AppStateModel): Todo[] {
    return state.todos;
  }

  public static todoById(id: string) {
    return createSelector([AppState.todos], (todos: Todo[]): Todo => {
      return todos.find((todo) => todo.id === id)!;
    });
  }

  public static extendedTodoById(id: string) {
    return createSelector(
      [AppState.todoById(id)],
      (todo: Todo): ExtendedTodo => {
        console.log(todo.id);

        return {
          ...todo,
          extendedProperty: `alo`,
        };
      }
    );
  }

• I loop through the todos in the app.component and render a child component for every todo
• I pass the todo as an argument to the child component
• The child component uses the todo input to then select to extendedTodoById(this.todo.id) in ngOnInit
• When changing the todos in the state via an action, the selector triggers for the removed todo before the component is destroyed. todo is undefined even though the expectation would be for it to be defined. Leading to the following error The selector below has thrown an error upon invocation. Please check for any unsafe property access that may result in null or undefined values.

🔬 Minimal Reproduction

Repository: https://github.com/jofrly/ngxsracecondition
Simply npm install && ng serve and then click on the button once while the console is opened.

🔥 Exception or Error

The selector below has thrown an error upon invocation. Please check for any unsafe property access that may result in null or undefined values. (todo) => {
      console.log(todo.id);
      return __spreadProps(__spreadValues({}, todo), {
        extendedProperty: `alo`
      });
    }

Environment

Libs:
- @angular/core version: 18.1.0
- @ngxs/store version: 18.0.0

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [X] Chrome (iOS) version 126
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 22.0.0
- Platform:  Mac

[qstiegler]

Hey guys, we also do have the same issue. Is there any progress in solving this issue?

[markwhitfeld]

Hi there
This error was always happening, but previously the reporting of the error was being suppressed.
There is a store option which controls this setting.
In v18 the default setting for supressErrors has changed from true to false (see PR #2111 ).

It is better to fix your selectors when encountering these errors so that all selector results are more predictable.

PS. Many of the breaking changes of v18 are listed here and in the release article.