Заметил интересную особенность в реакте, по факту когда в текст вставляешь {значение}, то по факту он создаёт обычный textNode и меняет значение именно у него. Не затрагивая другой текст без надобности. Вот такая она чертова оптимизация.

Пример для fiddle:

HTML:

<div id="testContainer">Hello world</div>
<button id="button">Change</button>

JS:

const container = document.getElementById("testContainer");
container.appendChild(document.createTextNode(", and "));
const reactiveElement = document.createTextNode("universe");
container.appendChild(reactiveElement);
container.appendChild(document.createTextNode("!"));
const doChange = ($event) => reactiveElement.nodeValue="You";
document.getElementById("button").addEventListener("click", doChange);