JSFiddle - React, Tailwind, and code Playground

Proxy: track array change

by Csaba Hellinger

JavaScript

function trackChange(obj, onChange) {
	const handler = {
    	set (obj, prop, value) {
        	const oldVal = obj[prop];
            Reflect.set(obj, prop, value);
            onChange(obj, prop, oldVal, value);
        },
        deleteProperty (obj, prop) {
            const oldVal = obj[prop];
            Reflect.deleteProperty(obj, prop);
        	onChange(obj, prop, oldVal, undefined);
        }
    };
    return new Proxy(obj, handler);
}

console.clear();

let myArr = trackChange([1,2,3], function (obj, prop, oldVal, newVal) {
	prop = parseInt(prop) ? `[${prop}]` : `.${prop}`;
    let sum = myArr.reduce((a,b) => a + b);
	console.log(`myArr${prop} changed from ${oldVal} to ${newVal}`);
    console.log(`  sum [${myArr}] = ${sum}`);
});

myArr[0] = 4;
delete myArr[2];
myArr.length = 1;