Computed value after "disposing" an effect #331

painotpi · 2023-03-27T11:45:28Z

painotpi
Mar 27, 2023

I was following the readme guide and got stuck at the following,

// Update does nothing, because no one is subscribed anymore.
// Even the computed `fullName` signal won't change, because it knows
// that no one listens to it.
surname.value = "Doe 2";

Based on the example (and the comment), I expected dispose() to unsubsribe from all signals, I expected console.log(fullName.value) to not have "Doe 2" as the surname; but it does. Is this expected? How do I better understand what "subscription" means in the context of signals?

Replicated example: https://replit.com/@painotpi/SingalsTest

Code:

import { signal, computed, effect } from '@preact/signals-core'

const fname = signal("Jane")
const lname = signal("Doe")

const fullname = computed(() => fname.value + " " + lname.value)

const dispose = effect(() => {
  console.log(fullname.value)
})

fname.value = "John"

dispose()

lname.value = "Doe 2"

console.log(fullname.value)

Output:

Jane Doe
John Doe
John Doe 2

painotpi · 2023-03-27T11:57:06Z

painotpi
Mar 27, 2023
Author

I guess this is happening because I'm running this in a node env. ~~Closing this.~~ This is also happening in a browser env, the code is the same,

HTML:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing Preact signals</title>
</head>
<body>
  <h1>Testing Preact Signals</h1>
  <script type="importmap">
    {
      "imports": {
        "@preact/signals-core": "./node_modules/@preact/signals-core/dist/signals-core.mjs"
      }
    }
  </script>
  <script src="./index.js" type="module"></script>
</body>
</html>

JS:

import { signal, computed, effect, batch } from '@preact/signals-core'

const name = signal('Jane')
const surname = signal('Doe')
const fullName = computed(() => name.value + ' ' + surname.value)

// Logs: "Jane Doe"
const dispose = effect(() => {
  console.log(fullName.value)
})

name.value = 'John'

// Destroy effect and subscriptions
dispose()

// Update does nothing, because no one is subscribed anymore.
// Even the computed `fullName` signal won't change, because it knows
// that no one listens to it.
surname.value = 'Doe 3'

console.log(fullName.value)

Output:

0 replies

rschristian · 2023-03-29T11:09:25Z

rschristian
Mar 29, 2023
Collaborator

Your console.log() is a subscription. A subscription is just something that accesses the value of the signal. fullName is going to be computed, despite the dispose(), because you still rely on it (though in this case it's just a log statement).

import { signal, computed, effect } from "https://esm.sh/@preact/signals-core";

const s = signal(0);
const c = computed(() => {
    console.log('triggering computed');
    return s.value
});

const dispose = effect(() => {
    console.log('triggering effect');
    return c.value;
});

dispose();

s.value = 1;

// Comment and uncomment me
//console.log(c.value);

Commented out:

triggering effect
triggering computed

Uncommented:

triggering effect
triggering computed x2 (once from effect access and another as a result of s.value being set)
1

1 reply

painotpi Apr 1, 2023
Author

Ah! that explains it. Thanks, I probably missed the readme that mentions what a "subscription" meant.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Computed value after "disposing" an effect #331

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Computed value after "disposing" an effect #331

painotpi Mar 27, 2023

Replies: 2 comments · 1 reply

painotpi Mar 27, 2023 Author

rschristian Mar 29, 2023 Collaborator

painotpi Apr 1, 2023 Author

painotpi
Mar 27, 2023

Replies: 2 comments 1 reply

painotpi
Mar 27, 2023
Author

rschristian
Mar 29, 2023
Collaborator

painotpi Apr 1, 2023
Author