title: Scrolling to a position in an element on page load with React useEffect
body: <p>I'd like to scroll to a given horizontal position in an element immediately after it's rendered by React. For context, I'm using Next.js with server-side rendering, so <code>useLayoutEffect</code> isn't an option.</p>
  
  <pre><code>export default function WideElement () {
    const ref = useRef(null)
  
    useEffect(function () {
      ref.current.scrollLeft = 1000
    }, [])
  
    return (
      &lt;Container ref={ref}&gt;
        ...
      &lt;/Container&gt;
    )
  }
  </code></pre>
  
  <p>However, the above code doesn't scroll when the page loads. Here the <code>...</code> represents a long list of child elements that stack horizontally and overflow the container.</p>
  
  <p>I have noticed that if I impose an artificial delay on the scroll, it seems to work fine, and <code>Container</code> is immediately scrolled 1000 pixels to the left.</p>
  
  <pre><code>export default function WideElement () {
    const ref = useRef(null)
  
    useEffect(function () {
      setTimeout(function() {
        ref.current.scrollLeft = 1000
      }, 1000)
    }, [])
  
    return (
      &lt;Container ref={ref}&gt;
        ...
      &lt;/Container&gt;
    )
  }
  </code></pre>
  
  <p>I think I might be misunderstanding <code>useEffect</code>. What am I missing, and how could I make this work?</p>