title: Is JavaScript's .setSelectionRange() incompatible with React Hooks?
body: <p>This question revamps a <a href="https://www.reddit.com/r/reactjs/comments/b077dx/javascripts_setselectionrange_incompatible_with/" rel="nofollow noreferrer">question</a> on r/reactjs.</p>
  
  <p>I have a controlled <code>input</code> of which I can programmatically change the value. I would like to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange" rel="nofollow noreferrer"><code>.setSelectionRange()</code></a> in order to maintain the caret position within the input.</p>
  
  <p>Except this doesn't work: <strong>each re-render automatically sets the selection range to the end of the input by default</strong>.</p>
  
  <p>The problem is illustrated in this <a href="https://codesandbox.io/s/jj253yvq9w" rel="nofollow noreferrer">sandbox</a>, where the author of the original question fixed the problem with a 10ms <code>setTimeout()</code> delay.</p>
  
  <p>How do I achieve this without using <code>setTimeout()</code> or <a href="https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate" rel="nofollow noreferrer"><code>getSnapshotBeforeUpdate()</code></a>, which is not compatible with Hooks?</p>