<p dir="auto">I've read the article on <a href="https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props" rel="nofollow">Update on Async Rendering</a> and I have a little doubt about <code class="notranslate">getDerivedStateFromProps</code>, i.e. why it does't receive prevProps as one of its arguments?</p>
<p dir="auto">There are situations where it is useful to compare prevProps with nextProps, and what the article suggests (i.e. <em>You may notice in the example above that props.currentRow is mirrored in state</em>) VERY IMHO is wrong for a couple of reasons. The first one is that it breaks the single source of truth rule (and we also have the inconvenience of keeping props.currentRow and state.lastRow in sync), and the second one I think is summarized here: <a href="https://reactjs.org/docs/thinking-in-react.html" rel="nofollow">https://reactjs.org/docs/thinking-in-react.html</a> i.e. <em>The key here is DRY: Don’t Repeat Yourself. Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand</em>. This is a suggestion I've basically seen since the dawn of react, so copying a prop to the state just to have it around when I need it looks a bit wrong to me. So my suggestion would be to add <code class="notranslate">prevProps</code> as an argument to <code class="notranslate">getDerivedStateFromProps</code>.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When an input field changes from "email" to "text", an exception TypeError will be thrown from setSelection.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/adrianimboden/react-bug-reproduction/master/screenshot.png"><img src="https://raw.githubusercontent.com/adrianimboden/react-bug-reproduction/master/screenshot.png" alt="Screenshot" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Reproduction</strong><br>
See here: <a href="https://github.com/adrianimboden/react-bug-reproduction">https://github.com/adrianimboden/react-bug-reproduction</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
It should not crash because of an uncaught exception</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
master (<a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/facebook/react/commit/4ca7855ca062d5d7dfca83c86acf46731e1e57ef/hovercard" href="https://github.com/facebook/react/commit/4ca7855ca062d5d7dfca83c86acf46731e1e57ef"><tt>4ca7855</tt></a>)<br>
Firefox</p>
<p dir="auto">This would be my proposed change to fix the issue: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/adrianimboden/react/commit/db923b8c3c1cb23ad9fb150c160ce56f39dd3cae/hovercard" href="https://github.com/adrianimboden/react/commit/db923b8c3c1cb23ad9fb150c160ce56f39dd3cae">adrianimboden@<tt>db923b8</tt></a></p>