Unable to Update UI with Signals in React+Vite Application

[Cristhianzl]

I am encountering difficulties while attempting to utilize signals in my React application with Vite. I am testing the usability of signals using the example provided in the documentation, but unfortunately, the UI does not update as expected.

import { signal } from "@preact/signals-react";
export const SimpleComponent = () => {
  const count = signal(0);
  const value = count.value;
  const increment = () => {
    console.log(count.value); // Correctly logs the value
    // The UI does not update even though the value is changed
    count.value = 10 * Math.random();
  };
  return (
    <div>
      {value}
      <button onClick={increment}></button>
    </div>
  );
};

The UI does not reflect changes when the button is clicked, even though console.log(count.value) correctly displays the updated value in the console. I suspect there might be an issue with the way signals are being used or updated in the React component.

Can you help me troubleshoot this issue?

 "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.1.1",
    "@preact/signals-react": "^2.0.0",
    "@tanstack/react-query": "^5.17.1",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "preact": "^10.19.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.49.2",
    "react-qr-code": "^2.0.12",
    "sort-by": "^1.2.0"
  },

[XantreDev]

You need to use useSignal hook

[rschristian]

Usage in v2 changed, please see instructions for getting started: https://github.com/preactjs/signals/tree/main/packages/react#react-integration