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.

Element ordering after rerender is wrong sometimes

See original GitHub issue

Hi, 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:closed
  • Created 7 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
developitcommented, Jun 4, 2016

Fix is up as preact@beta (preact@5.0.0-beta7). Thanks again!

0reactions
aeosynthcommented, Jun 4, 2016
Read more comments on GitHub >

github_iconTop 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 >

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