title: synchronise scroll of two react components without using state and actions
body: <p>I am trying to sync scroll of two different components in React so that if I scroll one in one component the other component will also scroll. The two are in different ratios so I have to calculate to offsets every time.</p>
  
  <p>I don't want to use state and actions (I am using redux) since it hurts my performance due to re-rendering every mouse scroll (I also tried debouncing/throttling).</p>
  
  <p>I have a wrapper component which renders two other components like so:</p>
  
  <pre><code>class Wrapper extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;FirstComponent /&gt;
          &lt;SecondComponent /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I tried to use <code>ref</code> but it doesn't work on custom components (I get <code>undefined</code>) and in any case this all looks like an anti-pattern for react/redux.</p>
  
  <p>Any suggestion on how to achieve that without hurting performance and staying as close as possible to the React/Redux patterns?</p>