Description
Describe the bug
I’m working with a custom reactive function that combines both getter and setter behavior. Here’s the code I’m using:
function useSignal<T>(value, options) {
const [get, set] = createSignal(value, options);
return (value) => {
if (value === undefined) return get();
else return set(value);
}
}I’ve noticed unexpected behavior when using this function in certain JSX expressions. Consider the following example:
<button onclick={() => signal((i) => i + 1)}>+1</button>
<span>{signal()}</span>
<>{signal()}</>
{signal()}
{signal}In the four usages above:
- Cases 1 and 4 work as expected.
- Cases 2 and 3 do not update properly—they remain stuck at the initial value. Additionally, when the signal is modified for the first time, it gets reset to its initial value.
Upon inspecting the compiled JSX output, I found that cases 2 and 3 are compiled into _memo(signal), and it seems this is the cause of the problem.
Your Example Website or App
https://playground.solidjs.com/anonymous/641b7798-1f0d-4187-8846-b3053c292652
Steps to Reproduce the Bug or Issue
- Open this SolidJS Playground link: https://playground.solidjs.com/anonymous/641b7798-1f0d-4187-8846-b3053c292652.
- Click the "+1" button multiple times.
- Observe the rendered output for each of the four cases
Expected behavior
All four cases should work correctly
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response