Разбор изменения DOM‑элементов в React‑компоненте

Условие

Необходимо определить, какие узлы DOM‑дерева будут перерисованы после того, как пользователь нажмёт кнопку в представленном компоненте.

function SimpleButton(props) {
    const [label, setLabel] = useState(props.initialText || 'a');
    const changeText = () => {
        setLabel(label + label);
    };

    return (
        <button onClick={changeText}>
            {label}
        </button>
    );
}

Ответ

После клика изменится текст внутри существующей кнопки: например, a превратится в aa. Функция компонента выполнится заново, но сам DOM-элемент button пересоздавать не требуется.

React сравнит прежнее и новое описание элементов: тип и позиция кнопки остаются теми же, меняется лишь текстовый потомок. Из этого не следует, что браузер перекрасит строго один DOM-узел: layout/paint зависят от размеров и оформления.

Для обновления из прошлого состояния предпочтительно setLabel(previous => previous + previous). initialText используется только при инициализации state; изменение prop позже само по себе label не сбросит. Проверка props.initialText || 'a' также заменяет пустую строку на 'a'; если пустая строка допустима, используйте ?? вместо ||.