Как предотвратить потерю фокуса на textarea при вводе символов? key

для textarea и render вместо component в реакт роутере не помогают, autoFocus не подходит

const [review, setReview] = useState({ productRating: 0, review: "" });

const handleTextarea = event => {
const el = event.target;
el.style.height = el.scrollHeight + 'px';
setReview(prevState => {
return { ...prevState, review: el.value };
})
}

const changeRating = event => {
setReview(prevState => {
return { ...prevState, productRating: event };
})
}

<ReactStars
count={5}
value={review.productRating}
activeColor="#0F0F0F"
color="#747474"
size={16}
onChange={changeRating}
/>
<textarea
value={review.review}
onChange={handleTextarea}
className="productLeaveReview__textarea">
</textarea>

Работать с хост енв (dom в данном случае) только через реакт.

Так это и есть реакт вроде, написал управляемый компонент так же, как и раньше, но здесь почему-то фокус теряется каждый раз при изменении стейта

Уберите const el = event.target; el.style.height = el.scrollHeight + 'px';

Убирал, не помогает

тогда воспроизводите в песочнице

https://codesandbox.io/s/elastic-chebyshev-j9zpl?file=/src/ProductLeaveReview.js

https://codesandbox.io/s/interesting-sutherland-vm83w

1. Изучи как работает jsx, и во что он траспайлится, пригодится репл 2. Изучи тему замыканий в js https://whatthefuck.is/closure 3. Изучи особенности работы хуков https://overreacted.io/a-complete-guide-to-useeffect/ https://overreacted.io/react-as-a-ui-runtime/

Спасибо конечно, но здесь же ничего не изменилось

сорри не сохранил https://codesandbox.io/s/interesting-sutherland-vm83w

я бы изменил бы чуть код вот на такой. https://codesandbox.io/s/immutable-lake-m1txh?file=/src/ProductLeaveReview.js