Am I allowed to use useState and useEffect when using signals?

[darix989]

Hello people,
I have setup my project by using npm init preact, and then I installed @preact/signals.
I can see that using a signal in a component with useState breaks the rendering expected behavior.
For example, with this code:

import { render } from 'preact';
import { signal } from '@preact/signals';
import { useEffect, useState } from 'preact/hooks';

const counter = signal(0);

export function App() {
	const [stateData, setStateData] = useState(0);
	useEffect(() => {
		setInterval(()=> {
			counter.value = counter.value + 1;
			console.log(`increasing counter ${counter.value}`)
		}, 5000)
	}, [])

	useEffect(() => {
		setInterval(() => {
			console.log(`increasing stateData`)
			setStateData(prev => prev+5)
		}, 1000);
	}, []);

	return (
		<div>
			<h1>{`Output ${counter.value + stateData}` }</h1>
		</div>
	);
}

render(<App />, document.getElementById('app'));

package.json

{
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview"
	},
	"dependencies": {
		"@preact/signals": "^2.0.1",
		"preact": "^10.20.1"
	},
	"devDependencies": {
		"@preact/preset-vite": "^2.9.3",
		"typescript": "^5.7.3",
		"vite": "^6.0.4"
	}
}

I see no re-render every second (when useState fires) but it is only every 5 seconds (when the signal fires) that I can see the 'real' value of the useState variable. It is enough to use const counter = signal(0); to prevent the component and any eventual children to re-render by using classical state variables (useState).

Am I missing something?
In this page it does not mention this kind of conflict.

[predaytor]

did you forget the return function?

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

[darix989]

Hello @predaytor ,
thanks for the comment, but cleaning up with the return function does not solve the problem, but thanks for suggesting that.

[JoviDeCroock]

This works perfectly for me https://stackblitz.com/edit/vitejs-vite-1auxunjd?file=src%2Fapp.tsx not sure what you're seeing but this might be related to #630. Do you have any specific bundler that isn't vite or is your preact version older than 10.12 in your real application?

There might also be something going on where you forget to cleanup the set interval.

Being completely clear, this is expected to work but there are some nuances with state settling as lined out in that issue. Before that fix there was an issue where conflicting update could cause infinite loops, with the fix lined out in #630 mixing signals and state should work in everything as of v10.12.

That being said, I've heard a bug in #650 that mentions something similar to your issue. However it's been hard to dig to the bottom of that issue so if you can give any more pointers to your specific case or provide a way to reproduce it I'd love to take a look.

[darix989]

I was able to see the stackblitz used node 18.20.3, and I tried it too, but same output.
Maybe it is worth to say that I am using a Windows machine and launching the app from Git Bash terminal?

[JoviDeCroock]

Same, none of that matters as we are talking about browsers. I also doubt that any build process would differentiate based on that.

The only thing that would matter is the version of preact and any potential less frequent transformations.

[darix989]

I will do more tests and let you know.
Thanks a lot for the support so far.

[darix989]

Update: I have just run this same code on a Linux Debian machine with the same project setup and it the updates are working as expected.
I need to double check if some set up in my job laptop is altering the preact used version or something else.

[darioRandazzoAccedo]

I confirm the problem was on my end.
Thanks again for the help.
I can consider solved this discussion since the answer is: yes, I can use it together and it was not able to run it because of a problem of my setup.

ps: I am going to open another discussion to make ask about specific interactions between standard hooks and signals.