Signals-React not making my components reactive !!

[ananduremanan]

Hey, I'm new to signals, why this is not working in my react project set up with vite. Do I need to set up anything else?

import { useSignal, useComputed } from "@preact/signals-react";
import "./App.css";

export default function App() {
  const count = useSignal(0);
  const double = useComputed(() => count.value * 2);

  return (
    <button onClick={() => count.value++}>
      Value: {count.value}, value x 2 = {double.value}
    </button>
  );
}

But, the code

import { signal, useSignal } from "@preact/signals-react";
import "./App.css";

export const count = signal(0);

const updateCount = () => {
  count.value += 1;
};

function App() {
  const countValue = useSignal(count);

  return (
    <>
      <div className="card">
        <button
          onClick={() => {
            updateCount();
          }}
        >
          count is {countValue}
        </button>
      </div>
    </>
  );
}
export default App;

is working fine!!!

"dependencies": {
    "@preact/signals-react": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }

[ananduremanan]

My Mistake, The documentation is not clear..

I need to import import { useSignals } from "@preact/signals-react/runtime"; instead of import { useSignals } from "@preact/signals-react"; as in the documentation.