React at 60fps Example 1

ScrollPane.js

class ScrollPane extends React.Component {
 componentDidUpdate() {
  // Each time we get new props we set the 
  // new scrollTop position on the DOM element
  this.el.scrollTop = this.props.scrollTop
 }
 render() {
  <div ref={(el) => {this.el = el}}>
 }
}

class ScrollContainer extends React.Component {

 constructor() {
  super()
  this.leftPane = null
  this.rightPane = null
  this.state = {
   leftPaneScrollTop: 0,
   rightPaneScrollTop: 0
  }
 }
 
 handleLeftScroll = (evt) => {
  // Calculate new scrollTop positions
  // for left and right panes based on
  // DOM nodes and evt.target.scrollTop
  const leftPaneScrollTop = …
  const rightPaneScrollTop = …
  
  // Don't do this since this will re-render everything
  // on each `scroll` event!
  this.setState({
   leftPaneScrollTop,
   rightPaneScrollTop
  })
 }
 
 render() {
  return (
   <div>
    <ScrollPane 
     ref={(el) => {this.leftPane = el}} 
     onScroll={this.handleScroll}
     scrollTop={this.state.leftPaneScrollTop}
    >
     <ExpensiveComponent />
    </ScrollPane>
    <ScrollPane
     ref={(el) => {this.rightPane = el}}
     onScroll={this.handleScroll}
     scrollTop={this.state.rightPaneScrollTop}
    >
     <ExpensiveComponent />
    </ScrollPane>
   </div>
  )
 }
}