JavaScript Signals worden mainstream

Het oude probleem in een nieuw jasje

State management is vaak een uitdaging. In React schrijf je useState en hoop je dat je component niet onnodig re-rendert. Je bouwt complexe dependency arrays voor useEffect en keep your fingers crossed dat je niks vergeet.

Als je aan een project werkt waar een simpele user lijst wordt beheert, zag je elke keer dat iemand een nieuwe user toevoegde, in de React DevTools hoe de hele component tree opnieuw werd gerenderd. Dit is niet efficiënt voor een simpele toevoeging.

Signals bieden een andere, functionelere aanpak. Het idee is simpel: als signal A verandert, dan weten alle signals die afhankelijk zijn van A dit automatisch. Hierdoor heb je geen dependency arrays meer nodig en hoef je niet handmatig te optimaliseren welke onderdelen van je applicatie moeten updaten. Het systeem houdt de afhankelijkheden automatisch bij en zorgt ervoor dat alleen de benodigde updates plaatsvinden.

Hoe SolidJS Signals nieuw inblaast

Ryan Carniato bedacht SolidJS en maakte Signals weer relevant. Zijn framework laat zien hoe krachtig deze aanpak kan zijn. In plaats van hele componenten opnieuw te renderen, update SolidJS alleen de exacte DOM-elementen die moeten veranderen.

javascript

const [count, setCount] = createSignal(0);

const doubledCount = createMemo(() => count() * 2);

Zo simpel kan het zijn. De doubledCount functie weet automatisch wanneer count verandert via de createMemo wrapper. Geen dependency array, want het werkt gewoon.

Wat nog meer opvalt: SolidJS heeft geen Virtual DOM nodig. De fine-grained updates maken dit overbodig. Dat dit aanzienlijke snelheidswinst oplevert is goed te zien in performance benchmarks.

Hoe Angular Signals integreert

Ryan Carniato bedacht SolidJS en maakte Signals weer relevant. Zijn framework laat zien hoe krachtig deze aanpak kan zijn. In plaats van hele componenten opnieuw te renderen, update SolidJS alleen de exacte DOM-elementen die moeten veranderen.

javascript

const [count, setCount] = createSignal(0);

const doubledCount = createMemo(() => count() * 2);

Zo simpel kan het zijn. De doubledCount functie weet automatisch wanneer count verandert via de createMemo wrapper. Geen dependency array, want het werkt gewoon.

Wat nog meer opvalt: SolidJS heeft geen Virtual DOM nodig. De fine-grained updates maken dit overbodig. Dat dit aanzienlijke snelheidswinst oplevert is goed te zien in performance benchmarks.

Vue had het al die tijd

Vue gebruikt dit concept al sinds versie 1. Ze noemden het alleen anders: fine-grained reactivity. Sinds versie 3 hebben ze een meer signal-achtige API toegevoegd.

javascript

const firstname = ref(‘John’);

const lastname = ref(‘Doe’);

const fullname = computed(() => `${firstname.value} ${lastname.value}`);

Het Vue team gaat nog een stap verder. Ze werken aan Alien Signals, een standalone implementatie die bizar snel is. Op benchmarks presteert het beter dan alle andere implementaties. En wat nog fijner is: het is niet gebonden aan Vue. Elk framework kan het gebruiken.

Dit laat zien waar we naartoe gaan. Signals worden groter dan individuele frameworks.

De toekomst wordt gestandaardiseerd

Er is een TC39 proposal voor native JavaScript Signals. We zitten nu in stage 1, dus er is nog een weg te gaan, maar de richting is duidelijk. Alle grote framework maintainers werken samen aan een gestandaardiseerde implementatie in een werkgroep, denk aan React, Angular, Vue, Solid.

Stel je voor: Signals als onderdeel van JavaScript zelf. Geen framework-specifieke implementaties meer. Geen incompatibiliteit tussen libraries. Gewoon native browser ondersteuning.

Wanneer Signals gebruiken

Maar de vraag is natuurlijk: wanneer pas je dit toe? Gebruik Signals wanneer je wilt dat je UI automatisch update bij state veranderingen. En dan vooral voor complexe interacties waar gebruikers veel met de interface doen.

Voor simpele formulieren of statische content zijn ze misschien overkill. Maar zodra je reactiviteit nodig hebt, zijn Signals een overweging waard.

Wat dit betekent voor jouw projecten

Er gaat wat veranderen. Signals gaan van niche naar mainstream. Angular integreert ze al. Vue bouwt er verder op. Het React team heeft aangegeven voorlopig geen signals te gaan gebruiken en gelooft in een ander model van performance winst, namelijk een compiler die zo ver mogelijk optimaliseert.

Voor nieuwe projecten is het de moeite waard om frameworks te overwegen die Signals native ondersteunen. Voor bestaande projecten kun je al experimenteren met de beschikbare implementaties.

De toekomst van frontend development wordt reactive. En Signals? Die leiden de weg!