question-mark
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 is constantly remounting subcomponents

See original GitHub issue

While trying to migrate from React to preact, we noticed some mounting/rerendering issues; Not sure if you consider this as a bug or not, but compared to react there’s a difference in the way preact decides which component got dropped and which one got reordered when two siblings have the same type but not the same children.

Code examples are clearer:

Notice that the subcomponent in the preact version is constantly remounting, if we hide/show the previous <div> while it’s mounted only once in React. I found a workaround by setting a key prop to identify the <div>s.

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
localvoidcommented, Sep 8, 2017

while react is taking the children and probably props into account to find the corresponding node.

React just assigns implicit keys for all nodes https://twitter.com/sebmarkbage/status/892977689430171649

0reactions
marvinhagemeistercommented, Apr 12, 2019

Related #1440

Read more comments on GitHub >

github_iconTop Results From Across the Web

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 force remounting on React components?
Change the key of the component. <Component key="1" /> <Component key="2" />. Component will be unmounted and a new instance of Component ...
Read more >
Components | Preact
There are two kinds of components in Preact, which we'll talk about in this guide. Functional Components; Class Components. Lifecycle Methods. componentDidCatch.
Read more >
A Semantics for the Essence of React - NSF PAR
React's concept of reconciliation determines the impact of state changes and updates the user-interface incrementally by selective mounting and unmounting of ...
Read more >
How to Hot-Load React Component in 7 days. Part 2(React)
Just keep in mind — we are fighting with remounts. ... As result you will have not ONE smart HoC, but TWO sub...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found