Refererring signals in JSX in Next 14, AppDir, Client component

[sanskar-19]

Consider a scenario below :

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

The above has been referred from the NPM documentation but, small difference is they referred signals as count.value and double.value in the JSX. It didn't seem to update the same in UI.

Not until I referred the signals as signal instead of signal.value in the JSX.

The output above.

Repository Link : https://github.com/sanskar-19/preact-signals

Originally posted by @sanskar-19 in https://github.com/preactjs/signals/issues/466#issuecomment-1913514903

[rschristian]

You're not calling useSignals() or using the Babel plugin. Need to do one or the other.

[sanskar-19]

You're not calling useSignals() or using the Babel plugin. Need to do one or the other.

So even when I am creating a signal using the useSignal() hook, still I have to manually call the useSignals()?

[rschristian]

As the instructions say, yes.

[sanskar-19]

As the instructions say, yes.

If you see the instructions it is mentioned that if you want to create signals inside of your component, simply calling useSignal() works. The useSignals() call is written when signal has been defined outside the component. Can you clarify this?

[rschristian]

If you see the instructions it is mentioned that if you want to create signals inside of your component, simply calling useSignal() works. The useSignals() call is written when signal has been defined outside the component. Can you clarify this?

You're confusing two different things.

You must use either the Babel plugin or useSignals(). They're what sets up and facilitates the reactivity. Without them, you would not get rerenders upon signal changes.

For creating signals, use signal() if outside a component and useSignal() inside, to get a stable reference.

[sanskar-19]

If you see the instructions it is mentioned that if you want to create signals inside of your component, simply calling useSignal() works. The useSignals() call is written when signal has been defined outside the component. Can you clarify this?

You're confusing two different things.

You must use either the Babel plugin or useSignals(). They're what sets up and facilitates the reactivity. Without them, you would not get rerenders upon signal changes.

For creating signals, use signal() if outside a component and useSignal() inside, to get a stable reference.

Oh. I thought since the hook has been defined so it would be handling that internally. But that brings me to my next question on why did the signal worked and not signal.value

[sanskar-19]

If you see the instructions it is mentioned that if you want to create signals inside of your component, simply calling useSignal() works. The useSignals() call is written when signal has been defined outside the component. Can you clarify this?

You're confusing two different things.

You must use either the Babel plugin or useSignals(). They're what sets up and facilitates the reactivity. Without them, you would not get rerenders upon signal changes.

For creating signals, use signal() if outside a component and useSignal() inside, to get a stable reference.

And another point over this, that as you can see, I am referencing a NEXT.js project which has now moved to a SWC instead of babel compiler. So, the only option I see left is to call the useSignals hook, but don't you think that is a bit too much, to call this particular hook inside every component where I am using signals.

And again why signal worked and not signal.value.

[rschristian]

So, the only option I see left is to call the useSignals hook, but don't you think that is a bit too much, to call this particular hook inside every component where I am using signals.

React limits what we can do. We provide options as we can, but unfortunately, this is just the way it is for now.

Preact doesn't have this issue, nor do other UI libraries that want to integrate with signals.

And again why signal worked and not signal.value.

You'd have to look into the source code yourself for that, I'm not familiar enough with the React implementation.

[sanskar-19]

So then what do you suggest as a standard way to consume signals in react?

Can you direct my request to the concerned member who is familiar with the react implementation.

I am keen to know on why this ‘signal’ worked and not ‘signal.value’