Signal value is not re-rendered upon change

[cwwmbm]

Describe the bug A very simple code taken from tutorial is not being executed as expected. NextJS 13.

To Reproduce

Here's the code:

'use client';

import React from 'react'

import { signal, computed, effect } from "@preact/signals";

const count = signal(0);
const double = computed(() => count.value * 2);

effect (() => {
    console.log('count', count.value);
    console.log('double', double.value);
});

export default function Sample() {
  return (
    <>
        <button onClick={() => count.value++}>
            Double
        </button>
        <div>{count.value}</div>
        <div>{double.value}</div>
    </>
  );
}

Both of these:

{count.value}

    <div>{double.value}</div>

Render zero and don't re-render when values change. Change in value is checked through effect in console.log - these are being changed every time I click a button.

[rschristian]

Are you using React or Preact?

@preact/signals is the Preact package as listed in the readme

[Wolven531]

Same issue here -

import { signal } from "@preact/signals";
import { FC } from "react";

const Gold = signal(0);

type AddGoldProps = {
  amount?: number;
};

const AddGold: FC<AddGoldProps> = ({ amount = 1 }) => {
  const handleClick = () => {
    const start = Gold.value;

    Gold.value = start + amount;
  };

  return (
    <button onClick={handleClick}>
      Add{" "}
      <span
        style={{
          color: "#ff0",
        }}
      >
        {amount}
      </span>{" "}
      Gold
    </button>
  );
};

function App() {
  return (
    <>
          <div>Signal Gold: {Gold.value}</div>
          <AddGold />
    </>
  )
}

[rschristian]

@Wolven531 Same question, are you using React or Preact? @preact/signals is the Preact package, but you're importing a type from React, so this is unclear.

[Wolven531]

I see the issue - I followed the "Getting Started" page for Preact (https://preactjs.com/guide/v10/getting-started), but I'm attempting to integrate Signals into an existing React app. The page does not mention this workflow.

Instead, if integrating Preact Signals into an existing React app, one option is https://www.npmjs.com/package/@preact/signals-react

I found this thanks to a YT channel I follow (Web Dev Simplified, who explained the install + usage in a succinct, clear way here - https://www.youtube.com/watch?v=SO8lBVWF2Y8)

After running npm i @preact/signals-react, and updating the import above to import { signal } from "@preact/signals-react";, functionality works as expected.

[Wolven531]

@cwwmbm Hope the above helps; cheers

[rschristian]

I followed the "Getting Started" page for Preact (https://preactjs.com/guide/v10/getting-started), but I'm attempting to integrate Signals into an existing React app. The page does not mention this workflow.

Well, yes, that's how to get started using Preact... it's in no way related to signals.

The installation instructions are at the very top of the ReadMe, probably should've given them a skim.

Closing, OP probably had the same issue.