Demo codes doesn't match with "When not to use effects" documentation code examples

[rintheo]

Describe the bug

The demo codes linked at the below paragraphs in the When not to use effects doesn't match the code examples written below them:

You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this (demo):

• Label text for left at the demo code references left.value instead of just left as seen at the code example in the docs. This also causes the rendered slider for left to only display "/100 left" with no value.

Instead, use callbacks where possible (demo):

• Same as above.

If you need to use bindings, for whatever reason (for example when you want some kind of "writable $derived"), consider using getters and setters to synchronise state (demo):

• The demo code linked here doesn't match its corresponding code example entirely but does match the above paragraph's "Instead, use callbacks..." code example.

Reproduction

The 3 demo links at When not to use effects documentation.

Logs

No response

System Info

Not relevant

Severity

annoyance