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.

Keyed DOM-nodes get rerendered when they shouldn't?

See original GitHub issue

Take a look at these runnable examples, one written with petit-dom and the other with picodom:

Picodom

<body>
<script src="https://unpkg.com/picodom"></script>
<script>
var { h, patch } = picodom

list = ["text0", "text1", "text2", "text3", "text4", "text5", "text6"];
oldnode = null;

function render() {
  node = h("div", {}, listElements());
  patch(oldnode, node, document.body);
  oldnode = node;
}

const listElements = () =>
  list.map((txt,idx) => {
    return h(
      "div",
      {
        onclick: () => {
          list.splice(idx, 1);
          render();
        },
        onupdate(e){
        	console.log(e)
        },
        key: txt
      },
      [txt]
    )});

render();
</script>
</body>

Petit-dom

<body>
<script src="https://cdn.jsdelivr.net/npm/petit-dom@0.0.14/dist/petit-dom.min.js"></script>
<script>
var { h, mount, patch } = petitDom

list = ["text0", "text1", "text2", "text3", "text4", "text5", "text6"];
oldnode = h('div', {}, ['first']);
document.body.appendChild(mount(oldnode));

function render() {
  node = h("div", {}, listElements());
  patch(node, oldnode);
  oldnode = node;
}

const listElements = () =>
  list.map((txt,idx) => {
    return h(
      "div",
      {
        onclick: (e) => {
          var i = idx
          list.splice(idx, 1);
          render();
        },
        key: txt
      },
      [txt]
    )});

render();
</script>
</body>

Open Chrome devtools, inspect elements and click on any text label do remove it, notice that the algorithm in picodom applies dom-changes to all the text-labels after the actual label (see animated gif below). They are also logged with the onupdate hook. But with petit-dom they are not. Is this expected behavior?

out

Issue Analytics

State:
Created 6 years ago
Comments:10 (8 by maintainers)

Top GitHub Comments

1reaction

jorgebucarancommented, Dec 12, 2017

@cjh9 Thanks for figuring it out why stuff was flashing! 👍

1reaction

jorgebucarancommented, Dec 11, 2017

https://github.com/hyperapp/hyperapp/issues/216

Top Results From Across the Web

When does React re-render components? - Felix Gerschau

When the VDOM gets updated, React compares it to to a previous snapshot of the VDOM and then only updates what has changed...

5 Ways to Avoid React Component Re-Renderings

In this article, I have discussed 5 different methods to prevent unnecessary re-rendering in React components. Most of these solutions capitalize caching, and ......

When does React render your component? - Zhenghao

React (re)renders your component when: there is a state update scheduled by your component · You probably shouldn't need to worry about seemingly ......

How does React decide to re-render a component? - Lucy Bain

A re-render can only be triggered if a component's state has changed. The state can change from a props change, or from a...

The mystery of React Element, children, parents and re-renders

Looking into what is React Element, exploring various children vs parents relationship in React, and how they affect re-renders.