title: how to prevent two same useState hooks from being triggered on one click event
body: <p>I have 2 components with similar logic, they both conditionally display a message, based on the local state from useState hook and two props from the redux state. However, the problem occurs when I click on the ConnectedPasswordChange button - I see two messages, one from its own component and one from ProfileForm. Any idea how to get rid of that? Does it have something to do with event bubbling?</p>
  
  <pre><code>const ConnectedPasswordChange = (): Node =&gt; {
    const [submitted, setSubmitted] = useState(false);
  
    const isUpdating = useSelector(state =&gt; state.user.isUpdating);
    const updateError = useSelector(state =&gt; state.user.updateError);
  
    const handleSubmit = () =&gt; {
      const { currentPassword, newPassword } = passwordDetails;
      dispatch(passwordUpdateRequested(currentPassword, newPassword));
      setSubmitted(true);
      setTimeout(() =&gt; setSubmitted(false), 5000);
    };
  
    return (
      &lt;Form onSubmit={handleSubmit}&gt;
        &lt;PasswordChange passwordDetails={passwordDetails} onPasswordChange={setPasswordDetails} /&gt;
        &lt;div style={{ textAlign: "center" }}&gt;
          &lt;Form.Button secondary&gt;Button&lt;/Form.Button&gt;
        &lt;/div&gt;
        {submitted &amp;&amp; !isUpdating &amp;&amp; !updateError &amp;&amp; &lt;Message positive content="Success" /&gt;}
      &lt;/Form&gt;
    );
  };
  </code></pre>
  
  <p>ConnectedPasswordChange is used in ProfileForm component that is using the same logic</p>
  
  <pre><code>const ProfileForm = ({ id, user: initialUser, locations, isUpdating, updateError, onSubmit }: Props): Node =&gt; {
  
    const [submitted, setSubmitted] = useState(false);
  
    const handleSubmit = () =&gt; {
      onSubmit(id);
      setSubmitted(true);
      setTimeout(() =&gt; setSubmitted(false), 5000);
    };
  
    return (
      &lt;Segment className="my-profile-main-container"&gt;
        &lt;Title /&gt;
        &lt;Divider /&gt;
        &lt;Form onSubmit={handleSubmit}&gt;
          &lt;PersonalDetails personalDetails={user} onPersonalDetailsChange={handleDetailsChange} /&gt;
          &lt;Divider /&gt;
          &lt;BankDetails bankDetails={user} onBankDetailsChange={handleDetailsChange} /&gt;
          &lt;div style={{ textAlign: "center" }}&gt;
            &lt;Form.Button secondary&gt;Button&lt;/Form.Button&gt;
          &lt;/div&gt;
          {submitted &amp;&amp; !isUpdating &amp;&amp; !updateError &amp;&amp; &lt;Message positive content={t("updateSucceeded")} /&gt;}
          &lt;Divider /&gt;
          &lt;ConnectedPasswordChange /&gt;
        &lt;/Form&gt;
      &lt;/Segment&gt;
    );
  };
  </code></pre>