Signals Testing

signals testing

this is created in response to a talk at react conf about the perf of signals vs react. see a live demo here (check the console logs for each example)

I WANT TO BE SUPER CLEAR: we do not have the implementation details of the test the speaker did, and I am in NO WAY implying that it was in bad faith, do not be a shit head about this. He did not say which framework he tested. My guess is that it was svelte based on the derived mentions, but I could be wrong.

The test was basically creating a giant map of data and then rendering a drawing based on the data. He said that in the signals version every time the map changed the entire tree was re-rendered. My guess is that when he tested it he did not use the SvelteMap primitive and instead did it the "react way" which resulted in the entire tree being re-rendered. (or refired whatever u want to call it idk)

The test is super simple, there are two svelte pages. One with the "react way" one with the "svelte way". It is a literal one line of code change to go from everything being re-fired on change to only the relevant parts being re-fired:

react way

<script lang="ts">
    let testMap = $state(
        new Map<string, number>([
            ['first', 0],
            ['second', 0],
            ['third', 0]
        ])
    );

svelte way

<script lang="ts">
    let testMap = new SvelteMap<string, number>([
        ['first', 0],
        ['second', 0],
        ['third', 0]
    ]);

you can re-produce this by starting the dev server bun dev and then checking the console logs on the button presses on each page.