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.

Preact remounts nodes when a child element is perpended

See original GitHub issue


I have an issue with Preact where Preact remounts my nodes in the DOM whenever a new node is prepended(an ELEMENT_NODE, not TEXT_NODE). This causes css transitions to break.

If my DOM tree looks like this:

<div id="parent">
  <div id="childA"></div>
  <div id="childB"></div>

And i then prepend a child via a Preact component, it will now look like this:

<div id="parent">
  <div id="newChild"></div>
  <input type="checkbox" id="childA-with-transition"></div> // removed and then placed into dom again
  <div id="childB"></div> // removed and then placed into dom again

This is troublesome because CSS transitions are broken. Let’s say i have a smooth transition on my checkbox and as i check the checkbox something is prepended(It could be an error message) then the css-transition would be interrupted because the DOM node is remounted.

Watch(in chrome debugger) as the <input> element is remounted into the DOM whenever <span>Required field</span> is prepended. This example has react aliased to preact-compat:

import React from 'react';

class Field extends React.Component {
  constructor () {
    this.state = {checked: false};
    this.onChange = this.onChange.bind(this);
  onChange () {
    this.setState({checked: !this.state.checked});
  render () {
    const {checked} = this.state;
    return (
        {checked ? '' : <span>Required field</span>}<br />
        <input type="checkbox" onChange={this.onChange} value={checked} />

export default Field;

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

developitcommented, Nov 24, 2016

Have a fix incoming in the beta tag 😃

ritz078commented, Nov 18, 2016

Facing the same issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

Preact is constantly remounting subcomponents #857 - GitHub
Okay, this is trickier then I initialy thought. Skipping nodes just based on the count of child nodes doesn't work. example: <div> ...
Read more >
Components - Preact
A Component is a self-contained piece of an application that can be rendered as part of the Virtual DOM tree just like an...
Read more >
Avoid unnecessary remounting of DOM elements in React
I ran into a strange problem while trying to use React's built-in animation API to fade in/out DOM elements when they enter/exit the...
Read more >
How to access the DOM element of the child component in ...
You need to pass ref as props to your child component. By doing this buttonElm will point to actual Button DOM element.
Read more >
How to use the preact.toChildArray function in preact - Snyk
To help you get started, we've selected a few preact.toChildArray examples, based on popular ways it is used in public projects.
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