Updating DOM after button click in a React component

It is necessary to predict how the DOM content will change when the user clicks the button. Consider the state managed by the useState hook and the onClick event handler.

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>
  );
}