Question about onremove

You guys are probably getting tired of me asking silly questions. 😃 I’m creating an Ace interop example for a presentation and not seeing the onremove fire when removing DOM elements… I’m thinking I need to somehow properly dispose of Ace. Here’s my code.

const AceComponent = ({ model, actions}) => {  
 
    const css = {
        height: "200px", 
        width: "800px",
        marginTop: "20px",
        marginBottom: "20px"
    }
  
    const setupEditor = (e) => {
        const editor = ace.edit(e);
        editor.setTheme("ace/theme/cobalt");
        editor.getSession().setMode("ace/mode/javascript");
        editor.setValue(model.editorText, 1);
        editor.getSession().on('change', _ => actions.setEditorText(editor.getSession().getValue()))                               
    }
    
    const disposeEditor = (e) => {
        console.log("dispose editor?");
        // ace.editor(e).destroy(),
    }
    
    return (
      <div>
          <div style={css} oncreate={setupEditor} onremove={disposeEditor}></div>
          <div>{ model.editorText }</div>
      </div>
    )
}

app({ 
  model: {
    showEditor: true,
    editorText: "// welcome to the ace editor \rconsole.log(\"hyperapp is the bee's knees!\");"
  },
  reducers: { 
    setEditorText: (model, text) => ({ editorText: text }),
    toggleEditor: (model) => ({showEditor: !model.showEditor})
  },
  view: (model, actions) => (
      <div>
          <input type="button" value="toggle editor" onclick={ _ => actions.toggleEditor() } />
          { model.showEditor && (<AceComponent model={model} actions={actions}></AceComponent>)}          
      </div>
   )  
})

[cdeutmeyer]

I think that from the perspective of a HyperApp end user, it seems reasonable that when the element “goes away” that onremove would then be called.

[jorgebucaran]

@cdeutmeyer Sorry, I meant this as a general question, what I am trying to ask is: why would one need to use onremove?

The only thing I think I would ever need it for is proper disposal of 3rd party libraries like the example above using Ace.

Exactly, why is this necessary? JavaScript has GC, or if you are toggling the editor, then you can call your disposeResources() function or similar inside that toggle effect.

Am I making sense?