Preact is constantly remounting subcomponents
See original GitHub issueWhile 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:
- react: https://codesandbox.io/s/422o58o3j4
- preact: https://codesandbox.io/s/j9r725q2w
- preact with workaround: https://codesandbox.io/s/6z431l219n
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:
- Created 6 years ago
- Comments:15 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
React just assigns implicit keys for all nodes https://twitter.com/sebmarkbage/status/892977689430171649
Related #1440