ElementsKit is trying to keep UI building blocks small and explicit: signals, JSX, custom elements, and a few utilities you can use on their own or inside React/Svelte.
The “use it inside React/Svelte” part is what I’m curious about — does ElementsKit ship a tiny adapter layer for scheduling/batching so signals don’t fight React’s render cycle, or is it basically “call setState when a signal changes” vibes? I found a related kirupa. com article that can help you go deeper into this topic:
The “use it inside React/Svelte” bit is what I’m curious about — does ElementsKit ship a tiny adapter layer for scheduling/batching so signals don’t fight React’s render cycle, or is it basically “call setState when a signal changes” vibes? If they don’t ship an adapter, the least-janky pattern I’ve used is: subscribe to the signal, then bridge it through useSyncExternalStore so React owns scheduling and you don’t end up spamming setState during render.
import { useSyncExternalStore } from "react";
function useSignal(signal) {
return useSyncExternalStore(
(onStoreChange) => signal.subscribe(onStoreChange),
() => signal.value,
() => signal.value
);
}
That’s the part that gets me with “works in React” claims: are they wiring into useSyncExternalStore (or an equivalent) so updates are consistent under concurrent rendering, or is it just a callback that triggers rerenders?
