rschristian
commented
3 months ago This is a configuration error, when using https://esm.sh, you must make sure you're marking Preact as external else you'll end up getting multiple copies -- Preact must be a singleton else hooks will not work, and signals rely upon hooks in order to function correctly. Here's an example with an import map, which is the recommended way to go about this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/preact@10.12.1",
"preact/hooks": "https://esm.sh/preact@10.12.1/hooks?external=preact",
"@preact/signals": "https://esm.sh/@preact/signals@1.1.3?external=preact",
"htm/preact": "https://esm.sh/htm@3.1.1/preact"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module">
import { render } from 'preact';
import { computed, signal } from '@preact/signals';
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';
// Create signals outside of the component
const count = signal(0);
const double = computed(() => count.value * 2);
export function App() {
const [hcount, setHcount] = useState(0);
const add = (n) => {
count.value += n;
console.log(count.value); // the state is updating
// UNCOMMENT LINE BELOW this to make signals work
// setHcount((c) => c + n);
};
return html`
<button onClick=${() => add(-1)}>Decrement</button>
<input readonly size="4" value=${count.value} />
<input readonly size="4" value=${double.value} />
<button onClick=${() => add(1)}>Increment</button>
`;
}
render(html`<${App} />`, document.getElementById('root'));
</script>
</body>
</html>
na47io
Environment
@preact/signals-core@preact/signals@preact/signals-reactdescribe the bug
When using
@preact/signalsthe state updates but the re-render never happens.Adding
useStatefrompreact/hooks, specifically invoking thesetCountercallback forces the re-render (?) and fixes the issue.to reproduce
See minimal example
```htmlsteps
Incrementbutton - observe nothing happeningclient.tsx:23, repeat button mash - observe rerenderexpected behaviour
the component re-renders without having to
useState.