Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to ask a rerender without killing the virtual DOM

See original GitHub issue

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
    Component, // already a preact component

// HACK alike React.unmountComponentAtNode(container.body)
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.


  • 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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

apfelboxcommented, Nov 21, 2018

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.

developitcommented, Apr 27, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to ask a rerender without killing the virtual DOM #1259
Hey guys, i got a quick question, and i do not know if what i want is possible. In my project i cannot...
Read more >
Preventing react from rendering unchanged componets into ...
Improving ReactJS rendering performance. First off, don't spend time on this unless you see the need for it in your application.
Read more >
How to Render Components Outside the Main ReactJS App
Lets take a look at the full code and then break it down: import React from 'react'; import { render } from 'react-dom';...
Read more >
Virtual DOM, Reconciliation And Diffing Algorithm Explained ...
In simple words, virtual DOM is just a copy of the original DOM kept in the memory and synced with the real DOM...
Read more >
The 2 Mistakes I did while using React State that I wish I never ...
If your state is holding a piece of UI that gets injected into the DOM, keeping track of the changes on that DOM...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found