javascript - 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 reactive way to stop that?

E.g. If a User scrolls down the page, then pushes a button which causes a Render, the UI would stay in the same scroll location as before.

// Forces a render which scrolls to top of page
this.setState({data: data});

UPDATE: Why does the UI scroll to the top for some renders, but not others?

Answer 1

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.