title: Using callback ref to modify scrollLeft property in React
body: <p>I've got a container div with a lot of children, and an overflow-x set to scroll.</p>
  <p>This allows me to scroll the content to the left and right using my trackpad (or drag on mobile).</p>
  <p>But I really would like the default scroll position to be the maximum horizontal value. (i.e. scrolled all the way to the right). The relevant code for this is <code>Element.scrollLeft = &lt;some large value&gt;</code>.</p>
  <p>I'm trying to figure out how to achieve this with React and callback refs. I have the following code:</p>
  <pre><code>const containerRef = useCallback(
    (node) =&gt; {
      if (node !== null) {
        node.scrollLeft = values.length * 20;
      }
    },
    [values.length]
  );
  return (
      &lt;div className={&quot;scroll-wrapper&quot;} ref={containerRef}&gt;
        values.map(()=&gt;{
          // Some stuff in here that's irrelevant.
        });
      &lt;/div&gt;
  )
  </code></pre>
  <p>(This code was based on <a href="https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node</a>)</p>
  <p>When I put a breakpoint in the useCallback function, I see it is properly invoked with a non-0 value, but right after the call when I inspect <code>node.scrollLeft</code> it is still 0.</p>
  <p>When I inspect the DOM in Chrome, I can actually force the <code>scrollLeft</code> of the element to be high number, which does work.</p>
  <p>So why doesn't the React useCallback ref work?</p>