How to destroy root Preact node?

I want to destroy the root Preact DOM node. I initially render my component as follows:

import { h, render } from 'preact';
import App from "./components/App";

render(<App />, document.querySelector("#app");

How do I destroy App? Do I simply unmount the #app DOM node, or does Preact offer a method similar to React’s unmountComponentAtNode() method?

[Kanaye]

To destory your app properly you can render null or ''(empty string) into your container and set the third parameter merge to your apps root element. Preact will then clean up the dom (okay it will leave an empty TextNode).

Example:

class App extends Component {
  render() {
    return (<h1> Some app </h1>);
  }

  componentWillUnmount() {
    window.alert('bye cruel world');
  }
}


const root = render(<App />, document.querySelector('#app'));

function destroy() {
  render(null, document.querySelector('#app'), root);
}

Here the example: https://jsfiddle.net/8pcfntvz/4/

[marvinhagemeister]

@cattermo It’s correct that render doesn’t return anything, but it did in older Preact versions during the 8.x release line. In current Preact versions (>= 10) the third argument can and should be omitted. We’re planning to drop it in the next major version.

To destroy a root node in current Preact versions (>= 10) calling

render(null, document.querySelector('#app'))

does the job.