React.js: Stop render from scrolling to top of page

Question

Every time you perform a render in React.js, the UI scrolls to the top of the page.

JSFiddle: http://jsfiddle.net/bengrunfeld/dcfy5xrd/

Any nifty or rea

Answer 1

Wanted to add here for those who are not using anchor tags, preventDefault will not save you. As bizarre as it is, for me it was related to rendering my child components inside a div with

display:table > display:tablecell

For some reason the child component's scroll position is lost in this situation when there is any re-render. Problem vanished when I switched to flexbox (display:flex).

Answer 2

@floydophone answered this one on Twitter.

https://twitter.com/floydophone/status/608129119025561600

@bengrunfeld @reactjs you forgot preventDefault() on your link handlers

Answer 3

If render trigger scrolling to the top it usually means some UI component is changing its dimension because of the state, this can be fixed by adding a minimum width/height

Answer 4

Ok if anyone read this , in my case the problem wasn't any of above. You must try first suggestions on above any way. I did everything including preventDefault() but didn't help me. The problem was ; using styled-components. Because, styled-components give a random classname every render. So it resets scroll. I gave the class name from css and solved my problem.