Limitations

Index Assignment in Arrays

There is one important limitation to be aware of when working with observable arrays: if you assign a new value directly by index like this:

state.array[0] = 1;

…the value will change, but no reaction or listener will be triggered. This is because, in this library, arrays are not wrapped in a Proxy, as proxied arrays can be significantly slower.

Use .set(index, value) for Reactive Updates

To ensure changes are tracked and reactions are triggered, use the set method:

state.array.set(0, 1); // ✅ Listeners are notified

Example

import { Observable, listen } from 'kr-observable';

class Example extends Observable {
  array = [10, 20, 30];
}

const state = new Example();
listen(state, (prop, value) => console.log(prop, value));

// ❌ Non-reactive write
state.array[0] = 1;

// ✅ Reactive write
state.array.set(0, 1);