Benchmark: reactive vs preactive

Script Preparation code:

let shouldTrack = false;

function preactive(obj) {
    obj.v = reactive(obj)
    return obj;
}

function reactive(obj) {
    return new Proxy(obj, {
        get(target, key) {
            if (shouldTrack) {
                console.log("tracking")
            };
            return target[key]
        }
    })
}

function getPreactive() {
    return preactive({
        a: "a",
        b: "h",
        c: "i",
        d: "j",
        e: "k",
        f: "l",
        g: "m",
    });
}

function getReactive() {
    return reactive({
        a: "a",
        b: "h",
        c: "i",
        d: "j",
        e: "k",
        f: "l",
        g: "m",
    });
}


function preactiveNoTrack() {
    const foo = getPreactive();
    const vFo_ = getReactive();
    foo.a;
    foo.b;
    foo.c;
    foo.d;
    foo.e;
    foo.f;
    foo.g;
}

function preactiveTrack() {
    const foo = getPreactive();
    const vFo_ = getReactive();
    foo.v.a;
    foo.v.b;
    foo.v.c;
    foo.v.d;
    foo.v.e;
    foo.v.f;
    foo.v.g;
}


function reactiveTrack() {
    const foo = getPreactive();
    const vFoo = getReactive();
    vFoo.a;
    vFoo.b;
    vFoo.c;
    vFoo.d;
    vFoo.e;
    vFoo.f;
    vFoo.g;
}

Tests:

preactive - no track
preactiveNoTrack();
reactive - track & no track
reactiveTrack();
Preactive - track
preactiveTrack();
init reactive
getReactive();
init preactive
getPreactive();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
preactive - no track
reactive - track & no track
Preactive - track
init reactive
init preactive

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to creating reactive objects in JavaScript: `preactive` and `reactive`. A reactive object is an object that can notify other parts of the program when its properties change. This can be useful for building reactive user interfaces, data-driven applications, or systems with complex dependencies.

**Options Compared**

The benchmark tests four different scenarios:

1. **Preactive - no track (`preactiveNoTrack`)**: In this scenario, the `preactive` function is used to create a reactive object without tracking changes (i.e., `shouldTrack` is set to `false`). This means that when a property of the object changes, no notification is sent.
2. **Reactive - track & no track (`reactiveTrack`)**: In this scenario, the `reactive` function is used to create a reactive object with tracking enabled (i.e., `shouldTrack` is set to `true`). However, the benchmark also tests the case where `shouldTrack` is `false`, which is similar to the preactive approach.
3. **Preactive - track (`preactiveTrack`)**: In this scenario, the `preactive` function is used with tracking enabled (i.e., `shouldTrack` is set to `true`). This means that when a property of the object changes, notifications are sent.
4. **Init reactive (`getReactive`) and preactive (`getPreactive`)**: These scenarios test the initialization time for creating reactive objects using the `preactive` and `reactive` functions.

**Pros and Cons**

*   **Preactive - no track (`preactiveNoTrack`)**: Pros:
    *   Faster execution times due to reduced notifications.
    *   Lower memory usage since no unnecessary data is stored.
*   Cons:
    *   Less flexible, as it does not provide a way to track changes.
*   **Reactive - track & no track (`reactiveTrack`)**: This approach seems to be redundant and unnecessary since the `preactive` function already provides an alternative implementation with similar behavior.
*   **Preactive - track (`preactiveTrack`)**: Pros:
    *   Provides a way to track changes, making it more flexible for complex scenarios.
    *   Notifies other parts of the program when properties change.
*   Cons:
    *   Slower execution times due to additional notifications.
*   **Init reactive (`getReactive`) and preactive (`getPreactive`)**: These initializations test how quickly objects are created.

**Libraries and Special Features**

The benchmark uses the `Proxy` object, which is a built-in JavaScript feature for creating proxies. A proxy allows you to intercept and manipulate access to an object's properties. In this case, it's used in the `preactive` and `reactive` functions to create reactive objects.

**Performance Comparison**

The benchmark shows that:

*   **Preactive - no track (`preactiveNoTrack`)** has the fastest execution times.
*   **Reactive - track & no track (`reactiveTrack`) and Preactive - track (`preactiveTrack`)** have similar performance but slower than `preactiveNoTrack`.
*   **Init reactive (`getReactive`) and preactive (`getPreactive`)** take the longest time to initialize objects.

Keep in mind that these results depend on the specific use case and requirements.

Related benchmarks:

reactive vs preactive (version: 1)

Comparing performance of: preactive - no track vs reactive - track & no track vs Preactive - track vs init reactive vs init preactive

Created: 3 years ago by: Registered User

Jump to the latest result

preactive - no track

reactive - track & no track

Preactive - track

init reactive

init preactive

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):