My Component
import { h } from 'preact';
import { quoteSignal } from '/quoteStore.ts';
export default function Button() {
return (
<button>hello 1 {quoteSignal.value}</button>
);
}
my signal
import { signal } from '@preact/signals';
// Setting up a signal for the shared label
export const quoteSignal = signal('first');
My island
import { useEffect } from 'preact/hooks';
import { quoteSignal } from '/quoteStore.ts';
export default function QuoteIsland() {
useEffect(() => {
quoteSignal.value = "Test Label";
console.log("useeffect")
const fetchQuote = async () => {
const response = await fetch('/api/quote/mystock');
const data = await response.json();
console.log(data.price);
quoteSignal.value = data.price;
};
fetchQuote();
const intervalId = setInterval(fetchQuote, 10000); // Every 10 seconds
return () => clearInterval(intervalId);
}, []);
return null; // This component doesn't need to render anything
}
The label "Test Label" is not being shown, and neither are any updates from the API, despite them showing in the console log. The button simply always displays its default label of "first".