31:T427,When building Classes on Observable, you'd probably rerun the cell containing the class definition. Unfortunately, repeatedly pressing enter on the `Leaky = class` cell causes a sort of memory leak, decreasing performance. In practice, using (large) backing arrays in a class constructor may cause dependent cell performance to decrease, for instance when importing classes from external notebooks and instantiating the class in multiple cells that frequently rerun. - 2023-08-16: Thanks @mootari for the memory profiler - 2023-08-17: Added a [`reuse()`](https://observablehq.com/d/b0dd5b3a645e3791#cell-346) method inspired by the [suggested workaround](https://github.com/observablehq/feedback/issues/591) - 2023-08-18: Added a [safer workaround](https://observablehq.com/d/b0dd5b3a645e3791#cell-760) that hoists arrays between cells reruns - 2023-08-22: Added an experimental [`reuse(Class)`](https://observablehq.com/@dleeftink/class-cell-memory-management#cell-1402) method that updates to previously instantiated `Class` with updated properties and methods32:Tae2,class Recycler { // to prevent duplicate this.prop construction // evaluate desired properties to undefined // based on init condition constructor({size = 1024, runs = 0, init = true}={}) { // delete this and run manually to observe effects refresh; // use below pattern for each property you want to construct once this.data = init ? new Uint8Array(size) : undefined this.runs = runs } insert(int,val = 1) { this.data[int] = val } // uncomment and rerun to add newMethod to reused Class // newMethod(val) { // console.log('New method says: ' + val) // } reuse(Class) { // method that instantiates and copies methods and properties // from a given Class to a prior Class instance // without overwriting stateful properties let stale = this; // retrieve previous Class instance let fresh = new Class({init:false}); // set new Class // retrieve old and new context let [ oldFuncs , oldProps ] = Class.getContext(stale); let [ newFuncs , newProps ] = Class.getContext(fresh); // deconstruct fresh and stale Class contexts let [ oldPropKeys, oldPropVals ] = [ Object.keys(oldProps) , Object.values(oldProps) ]; let [ newPropKeys, newPropVals ] = [ Object.keys(newProps) , Object.values(newProps) ]; let [ oldFuncKeys, oldFuncVals ] = [ Object.keys(oldFuncs) , Object.values(oldFuncs) ]; let [ newFuncKeys, newFuncVals ] = [ Object.keys(newFuncs) , Object.values(newFuncs) ]; // refresh properties let removeProps = oldPropKeys.filter(prop => ! newPropKeys.includes(prop)); let updateProps = newPropKeys.filter(prop => ! oldPropKeys.includes(prop)); removeProps . forEach(prop=> delete stale[prop]); updateProps . forEach(prop=>!stale[prop] && fresh[prop] ? stale[prop] = fresh[prop] : null); // refresh methods let removeFuncs = oldFuncKeys; let updateFuncs = newFuncKeys.map((func,i) => [func,newFuncVals[i].bind(stale)]); removeFuncs . forEach(func=> delete stale.constructor.prototype[func]); updateFuncs . forEach(([name,func])=> Object.defineProperty(stale.constructor.prototype, name, { value:func, configurable:true})); this.runs++ return this } static getContext(Class) { // global utility to extract methods // and properties from a given Class let { constructor, ... funcs } = ( Object.fromEntries ( Object.getOwnPropertyNames ( Object.getPrototypeOf ( Class )).map( key=> [key,Class[key]]))); let { ... props } = ( Object.fromEntries ( Object.getOwnPropertyNames ( Class ).map( key=> [key,Class[key]]))); return [funcs,props] } }33:[] 2f:{"title":"Class Cell memory management","cells":[{"id":0,"value":"# Class Cell memory management\n## Investigating `Class` definitions with (Typed) array constructors","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"### How to reproduce","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"This behaviour can be observed by either navigating to `Leaky` class below and repeatedly pressing `enter`\nor pressing the start button below. This emulates rerunning the class cell by inserting the `reset`\nreference into the constructor. \n\nThis bug can also be reproduced when removing the `reset` reference from the class constructor \nand manually repeating `enter`. How to best clean up cell classes that contain backing arrays?\nRerunning the `instance` cell seems to free the memory.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"instance = {\n\n let t1 = performance.now()\n\n let size = 25000000;\n let instance = new Leaky({size})\n\n for (let i = 0; i < size; ++i) {\n instance.insert(i)\n }\n\n //invalidation.then(()=>console.log(this))\n \n return {\n instance,\n time: performance.now()-t1,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"plotMemoryUsage({invalidation, interval: 50, updateInterval: 100, length: 500, width:620})","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"reset = {\n \n if(initA) {\n await Promises.delay(1000);\n \n let i = 0;\n \n while(i<10) {\n yield Promises.tick(100,++i)\n }\n }\n\n yield 0\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof initA = Inputs.button(\"Start\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"class Leaky {\n\n constructor({size = 1024} = {}) {\n reset; /* delete this and mannualy rerun cell to observe effects */\n this.data = new Uint8Array(size)\n }\n \n insert(uint,val = 1) {\n this.data[uint] = val;\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"___\n\n### Expected behaviour","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"When classes are instantiated within a `module` the performance is as expected, yet unused memory is not garbage collected.\nAfter N amount of runs, the runtime crashes when running out of memory (press and wait for start 5 - 10 times).\n* As [noted by mootari](https://github.com/observablehq/feedback/issues/591#issuecomment-1680188058), this also leaks memory; performance stays consistent on my end until the notebook runs out of memory","pinned":false,"hidden":false,"mode":"md"},{"id":191,"value":"sealed = {\n\n let src = `${Container.toString().replace('times;','')};\n\n let t1 = performance.now()\n\n let size = 25000000;\n let instance = new Container({size})\n \n for (let i = 0; i < size; ++i) {\n instance.insert(i)\n }\n\n let time = performance.now()-t1;\n\n export { instance , time };`\n\n var blob = new Blob([src], { type: \"text/javascript\",});\n var objectURL = URL.createObjectURL(blob);\n var module = await import(objectURL)\n\n return module\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"plotMemoryUsage({invalidation, interval: 50, updateInterval: 100, length: 500, width:620})","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"times = {\n \n if(initB) {\n await Promises.delay(1000);\n \n let i = 0;\n \n while(i<10) {\n yield Promises.tick(100,++i)\n }\n }\n\n yield 0\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"viewof initB = Inputs.button(\"Start\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"class Container { \n \n constructor({size = 1024} = {}) { \n \n times;\n this.data = new Uint8Array(size) \n \n } \n \n insert(uint) { \n this.data[uint] = 1 \n } \n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"___\n\n### Proposed workaround (unsafe)","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"> ***This pattern is [not recommended in production](https://talk.observablehq.com/t/how-to-dispose-class-cells-containing-array-constructors/8198/4), but might be useful when you are frequently making edits to a `Class` cell***\n\nTo prevent performance degradation on consecutive reruns of the `Class` cell, use the following pattern:\n\n1. Add a `reuse()` method to the `Class`\n\n - Include a class property that is incremented on each run (e.g. `this.runs++`)\n - Make it `return this`\n \n2. In the dependent cell, check if `this` has been defined\n\n - Reuse the previous `Class` instance if so\n - Instantiate a `new Class` if not\n \n3. Check how many times a dependent cell has been triggered via dataflow to execute branching code\n\nExecuting the `DataClass` cell now has the dependent cell reuse the previous class instance, rather \nthan initiating a new one and keeping the old reference in the inspector.\n","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"reused = {\n\n let t1 = performance.now()\n \n let size = 25000000;\n let instance = this ? this.instance.reuse() : new DataClass({size})\n\n // first run\n if(instance.runs == 0) { \n for (let i = 0; i < size; ++i) {\n instance.insert(i) \n }\n } \n \n // secondary runs\n else { \n for (let i = 0; i < size; ++i) {\n instance.insert(i,(i+instance.runs)%255)\n }\n }\n \n return {\n instance,\n time: performance.now()-t1,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"plotMemoryUsage({invalidation, interval: 50, updateInterval: 100, length: 500, width:620})","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"reuse = {\n \n if(initC) {\n await Promises.delay(1000);\n \n let i = 0;\n \n while(i<10) {\n yield Promises.tick(100,++i)\n }\n }\n\n yield 0\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"viewof initC = Inputs.button(\"Start\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"class DataClass {\n\n constructor({size = 1024,runs = 0} = {}) {\n reuse; // delete this and rerun manually to observe effects\n\n this.data = new Uint8Array(size)\n this.size = size;\n this.runs = runs;\n \n }\n\n insert(int,val = 1) {\n this.data[int] = val;\n }\n\n reuse(Class){\n this.runs++\n return this\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"___\n\n### Proposed workaround (safe)","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"Recommended by mootari, but still gives me decreased performance when rerunning the `recycleClass` cell multiple times.","pinned":false,"hidden":false,"mode":"md"},{"id":787,"value":"hoisted = {\n\n let t1 = performance.now()\n \n let size = 25000000;\n let instance = new HoistClass({size,init: this?.instance.data, runs:this?.instance.runs})\n\n for (let i = 0; i < size; ++i) {\n instance.insert(i,instance.runs) \n }\n\n return {\n instance, \n time: performance.now()-t1,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"plotMemoryUsage({invalidation, interval: 50, updateInterval: 100, length: 500, width:620})","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"rerun = {\n \n if(initD) {\n await Promises.delay(1000);\n \n let i = 0;\n \n while(i<10) {\n yield Promises.tick(100,++i)\n }\n }\n\n yield 0\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof initD = Inputs.button(\"Start\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":764,"value":"class HoistClass {\n\n constructor({size = 1024,init,runs = -1} = {}){\n rerun; // delete this and run manually to observe effects\n this.data = init ? init : new Uint8Array(size)\n this.size = size;\n this.runs = runs + 1\n\n }\n \n insert(int, val = 1){\n this.data[int] = val;\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1402,"value":"___\n\n### Experimental `Class.reuse(Class)` method","pinned":false,"hidden":false,"mode":"md"},{"id":1474,"value":"Another (unsafe) workaround is mutating the original `Class` with bounds methods \nfrom an updated `Class` on subsequent cell reruns. To implement this pattern:\n\n1. Add a `.reuse(Class)` function to the `Class` cell definition cell\n\n - Retrieve the previous `Class` state and mutate this with updated\n properties/methods from a fresh `Class`.\n - Delete undefined properties and remove old methods\n - Add updated properties and `.bind` new methods to the old `Class` instance \n\n2. Check whether a dependent cell's `this` contains a previous `Class` instance\n\n - Pass a `Class` reference to a `.reuse(Class)` function if so\n - Instantiate a `new Class` if not\n\n3. Check how many times a dependent cell has been triggered via dataflow to execute branching code\n\nThis allows previously allocated `Array` variables to be passed between subsequent `Class` reruns unchanged.\nOn my machine, the execution time of the dependent cell remains stable, and no extra memory is allocated.","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"recycled = {\n\n let t1 = performance.now()\n let size = 25000000;\n let instance = this ? this.instance.reuse(Recycler) : new Recycler({size})\n\n // first run\n if(instance.runs == 0) { \n for (let i = 0; i < size; ++i) {\n instance.insert(i) \n }\n } \n // secondary runs\n else { \n for (let i = 0; i < size; ++i) {\n instance.insert(i,1+instance.runs)\n }\n }\n \n return {\n instance,\n time: performance.now()-t1,\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1334,"value":"plotMemoryUsage({invalidation, interval: 50, updateInterval: 100, length: 500, width:620})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"refresh = {\n \n if(initE) {\n await Promises.delay(1000);\n \n let i = 0;\n \n while(i<10) {\n yield Promises.tick(100,++i)\n }\n }\n\n yield 0\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"viewof initE = Inputs.button(\"Start\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1047,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"import {plotMemoryUsage} from \"50cb8ca0dfe9b933\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}