Using condition on signal value [React]

[yacinec]

Hello everyone,

I'm using Preact signals in my React application, and there's something I don’t fully understand. I'll simplify my example to explain my question.

Let's say I have a signal called counter:

export const counter = signal<number>(0);

I want to display it in my component, so I do something like this:

const Test = () => {
   return (
      <div>
         <p>{counter}</p>
      </div>
   );
};

Here, everything works fine. However, now I only want to display the counter if its value is greater than 0:

const Test = () => {
   return (
      <div>
         <p>{counter.value > 0 ? counter : ""}</p>
      </div>
   );
};

But when I add this check on counter.value, my component no longer updates when I change the counter signal's value.

To update it, I do something like this:

counter.value += 1;

I feel like I'm missing something about how signals work. I couldn't find an answer in the documentation. Could someone explain how components listen to signal updates?

Thanks in advance!

[rschristian]

Are you using the Babel plugin or the useSignals hook?

[JoviDeCroock]

As the readme sais, read up on https://github.com/preactjs/signals/blob/main/packages/react-transform/README.md

[rschristian]

As our React Integration Instructions state, you must use the Babel plugin or manually insert useSignals() hooks into components.

[yacinec]

Thanks guys for your anwsers and your help.

I took a look at your links and tried the 2 approaches (the one with the Babel plugin and the one with the useSignal hook) but in both cases, I can't get the expected result.

My signal works well when I use it only in a single component. But when I try to use it in another component, its modification doesn't re-render my component.

I'll show you my version with the useSignal hook:

import { useSignal } from "@preact/signals-react";

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

  return (
    <div>
      <AnotherComponent count={count} />
      <p>Value: {count}</p>
      <button onClick={() => count.value++}>Increment</button>
    </div>
  );
}

function AnotherComponent({ count }) {
  return (
    <header>
      Notifications: {count.value > 0 && count.value}
    </header>
  );
}

Here when I increment my count, AnotherComponent isn't affected by the about of the signal's value.
According to the documentation, a component using the signal value should detect the signal update and re-render itself, right?

[rschristian]

It looks like you've misread. useSignals(), not useSignal().

useSignals() is an alternative to the Babel plugin that will make a component reactive. useSignal() is an alternative to signal() and used for creating a signal inside of a component.

import { useSignals } from "@preact/signals-react/runtime";

export const counter = signal<number>(0);

const Test = () => {
   useSignals();
   return (
      <div>
         <p>{counter.value > 0 ? counter : ""}</p>
      </div>
   );
};

You will need to use useSignals() in every component that consumes a signal.

[yacinec]

I'm sorry, I'd actually misread it!
Thank you very much, I understand better! It works perfectly now. Thanks again for your help and your time!

[rschristian]

No problem, glad it helps!