[kikki]

This is either a fundamental misunderstanding of React, or you're actually talking about a different library.

> React works well for simple, non-interactive components. Complex, interactive components are going to have state. Stateful components don't work so well in React

React components are designed with state in mind. When state changes, components passed that state in the form of props are re-rendered. Don't take my word for it though, from the first paragraph on the reactjs.org website; "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."

> At the point all of the benefits of React (preservation of selection, caret position, scroll position etc.) vanish.

I have never heard these spouted as the benefits of React. The main fundamental philosophy of React is that only components that have state changing "react" to changes - in other words, the benefits of React are: no unnecessary re-rendering (hence the virtual DOM).

> If you want to update props in a stateful component, the recommendation is to replace the component entirely by changing its key

This part just threw me, if you are doing it this way - you are doing it wrong.

[interlocutor]

> When state changes, components passed that state in the form of props are re-rendered.

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-d...

> I have never heard these spouted as the benefits of React.

You will find this if you read enough of React developers' blogs. JavaScript and DOM these days are fast enough that most pages can completely re-render the page and replace the whole DOM in one shot and you won't be able to tell the difference. The downside of doing that is that you lose focus, selection, scroll position, etc. So preserving those things is the benefit of React.