title: Loading a component with "Scroll to bottom" shows 1 frame when scrollbar is on top and then goes down
body: <p>I'm trying to load a component that is scrollable with the scrollbar at the bottom in the beginning. But in 1 frame, you can see that component is loaded with scrollbar on top and then it goes down. I just want to have the scrollbar at the bottom without delay, because is annoying for user experience</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div ref={chatScrollRef} className={styles.contentWrapper}&gt;
    &lt;div className={styles.contentWrapper__content}/&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.contentWrapper {
    flex: 1;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
      
    &amp;__content {
      width: 100%;
      height: 1000%;
      position: absolute;
      background-image: linear-gradient(to bottom right, red, yellow);
    }
  }
  </code></pre>
  <p><strong>JAVASCRIPT:</strong></p>
  <pre><code>useEffect(() =&gt; {
    setTimeout(() =&gt; {
      chatScrollRef.current.scrollTo({ top: chatScrollRef.current.scrollHeight });
      // chatScrollRef.current.scrollIntoView({ behavior: 'smooth' })
    }, 0)
  }, [])
  </code></pre>
  <p>** &quot;scrollTo&quot; is wrapped inside a setTimeOut to run it after the shortest possible delay. Still it doesn't work</p>
  <p><a href="https://gfycat.com/alienatedaccuratearuanas" rel="nofollow noreferrer">Problem view</a></p>
  <p>** Note that div has a gradient from top to bottom, red to yellow, to see at second 0 how div is red and then it turns to yellow.</p>