💥 React Signal not work in service

[samir4055]

Hi there, I am trying to manage the state by using the service in React with Vite, but it's not working
The signal value is changed, but ui is not re-render I don't know why it's a bug or my mistake, could you please guide me

Here is my todos component :

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonList,
  IonItem,
  IonLabel,
  IonCheckbox,
  IonButton,
  IonModal,
  IonInput,
} from "@ionic/react";

import "./Todos.css";
import { useRef } from "react";
import { effect, signal, useSignal } from "@preact/signals-react";
import TodosService from "../../states/todos.singal";

const Todos: React.FC = () => {
  const todoService = new TodosService();
  const modal = useRef<HTMLIonModalElement>(null);
  const todo = useSignal("");
  const todos = todoService.todos;

  function dismiss() {
    modal.current?.dismiss();
  }

  const save = () => {
    if (todo.value) {
      todoService.addTodo(todo.value);
      console.log("called", todo.value);
      todo.value = "";

      dismiss();
    }
  };
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
          <IonButton slot="end" size="default" id="open-custom-dialog">
            Add
          </IonButton>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonModal
          mode="ios"
          id="example-modal"
          ref={modal}
          trigger="open-custom-dialog"
        >
          <div className="wrapper ion-padding">
            <h1>Write your todo here!</h1>

            <IonList lines="none">
              <IonItem detail={false}>
                <IonInput
                  label="Todo"
                  value={todo.value}
                  onIonChange={(e: any) => (todo.value = e.target.value)}
                ></IonInput>
              </IonItem>
            </IonList>
            <IonButton
              mode="ios"
              expand="full"
              slot="end"
              size="default"
              className="ion-margin-top"
              id="open-custom-dialog"
              onClick={save}
            >
              Save
            </IonButton>
          </div>
        </IonModal>

        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonCard color="light">
          <IonList inset={true}>
            {todos.value.map((e, index) => (
              <IonItem key={index}>
                <IonCheckbox labelPlacement="start">
                  Label at the fixed stacked start
                </IonCheckbox>
              </IonItem>
            ))}
          </IonList>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default Todos;

Here is my todos service:

import ProductsApiService from "../services/products.api.service";
import { effect, signal } from "@preact/signals-react";
import { Product } from "../types/TProduct";

export type ProductGetParams = {
  query?: string;
  skip?: number;
  search?: boolean;
};

export default class ProductSignalService {
  public products = signal<Product[]>([]);
  private readonly productService = new ProductsApiService();

  constructor() {}

  getProducts = async (params?: ProductGetParams) => {
    try {
      const result = await this.productService.fetchProducts(params ?? {});
      if (result.products) {
        console.log("Products 🔥🔥🔥", result.products);
        this.products.value = result.products;
      }
    } catch (e: any) {
      throw Error(e);
    }
  };
}

[rschristian]

Are you using v2? And if so, are you using the Babel plugin?