JSFiddle - React, Tailwind, and code Playground

Proxy: track obj 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 myObj = trackChange({a: 1, b: 2}, function (obj, prop, oldVal, newVal) {
	console.log(`myObj.${prop} changed from ${oldVal} to ${newVal}`);
});

myObj.a = 5;
delete myObj.b;
myObj.c = 6;