Обновление DOM после нажатия кнопки в React‑компоненте

Условие

Необходимо предсказать, как изменится содержимое DOM, когда пользователь кликнет по кнопке. Учтите состояние, управляемое хуком useState, и обработчик события onClick.

import React, { useState } from 'react';

function SimpleButton(props) {
  const [text, setText] = useState(props.text || 'a');
  const doubleText = () => {
    setText(text + text);
  }

  return (
    <button onClick={doubleText}>
      {text}
    </button>
  );
}

Ответ

После первого клика надпись кнопки удвоится: при исходном 'a' станет 'aa', при следующем клике — 'aaaa'. React обновит текст существующей кнопки после изменения состояния.

Начальное значение берётся из props.text, если оно truthy, иначе используется a. Пустая строка поэтому также заменится на a. Обновления props.text после монтирования не перезаписывают уже созданное состояние автоматически. Для устойчивости к нескольким обновлениям лучше setText(previous => previous + previous). Удваивается именно текущее состояние, а не исходное свойство каждый раз.