How to ask a rerender without killing the virtual DOM

Hey guys, i got a quick question, and i do not know if what i want is possible.

In my project i cannot use JSX for preact, so i use Preact API directly to createElement (via h()) and render.

My problem is that i have to wipe entirely the preact root when i want to rerender, i do something like this :

// nested childs with changing props on runtime
const PreactComponent = Preact.h(
  TranslatorProvider, // already a preact component
  {
    locale,
    translations
  },
  Preact.h(
    Component, // already a preact component
    config
  )
);

// HACK alike React.unmountComponentAtNode(container.body)
// https://github.com/developit/preact/issues/53
if (this.root) {
  // wiping the dom to prevent duplicate
  Preact.render('', container.body, this.root);
} else {
  // TODO : rerender preact without killing the virtual DOM
}
// then totally rerender the component
this.root = Preact.render(PreactComponent, container.body);

What is the API to allow my code to know that the node is already loaded, and only update the props for it ? I cannot find it anywhere.

Thank for those who may help.

Notes:

• i use "preact": "7.1.0"and cannot move from it
• My preact code is rendered into a local iframe, i don’t think it can be a problem, but still, it’s an information to consider

[apfelbox]

Normally, you get the resulting root node in render. If you pass the same root node into the next render process, it should properly diff/update instead of replacing:

let rendered = render(PreactComponent, container.body);

// do some stuff.

// this will do a partial update instead of remounting.
render(PreactComponent, container.body, rendered);

You basically did this already, but just passed an empty string to it, to remove it. You don’t need to do that, as long as you are passing the third parameter to render (which is called mergeWith, so it already hints at the purpose) you should be fine.

[developit]

container.body.__k.forceUpdate()