Element ordering after rerender is wrong sometimes
See original GitHub issueHi, I have seen a bug that is happening in weird places that the order of items rendered gets switched up I have code similar to:
<div>
{logic && <div>...</div>}
{!logic && <h1>...</h1>}
<Wrapper>...</Wrapper>
</div>
when it renders first time its fine but if it rerenders with the logic changed it sometimes reverses the order of the 2 items that come out, this is really difficult to reproduce, was trying yesterday but could not come up with anything
This happens in many places, sometimes a form field gets pushed down or modal title ends up at the bottom etc.
I will try again today to have a repro of this problem
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Changing order of React components only triggers re-render ...
The problem is that you're a) sorting in the setState callback and b) your sort is mutating dives instead of setting state.dives to...
Read more >React re-renders guide: everything, all at once - Developer way
Re-render happens when React needs to update the app with some new data. ... i.e. elements are not added/removed/inserted/re-ordered.
Read more >Just Say No to Excessive Re-Rendering in React - GrapeCity
In this article, we will address instances of excessive re-rendering in React applications and demonstrate how to avoid them.
Read more >How to check if your component rerendered - and why!
Using React DevTools to highlight what components rerendered. There's a checkbox well hidden in the React DevTools settings that allows you to ...
Read more >How to identify and resolve wasted renders in React
We know that whenever the props for a component changes, a re-render happens. But sometimes the props didn't change. We write code in...
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
Fix is up as
preact@beta
(preact@5.0.0-beta7
). Thanks again!test case: https://jsfiddle.net/p16ea27s/