title: Prevent modal from closing after re-render in react
body: <p>Inside a Component, I have a Modal from which the user can do an update to some data through an API and then change the state of that main Component. Because there is a change in state, everything will re-render.</p>
  <p>I would like to keep the modal open, so that I can show a success message.</p>
  <p>The code would be something like this.</p>
  <pre><code> const Main = () =&gt; {
      const [state, setState()] = useState();
      return (
      &lt;Component state={state}&gt;
         &lt;Modal onButtonClick={() =&gt; {
             updateThroughApi().then(() =&gt; setState())} /&gt;
      &lt;/Component&gt;
      )
  }
  </code></pre>
  <p>When user clicks on modal's button, the state changes, and <code>Component</code> is re-rendered. Modal is rendered too, as it's inside.</p>
  <p>I have thought of two possible solutions:</p>
  <ol>
  <li><p>Move the modal outside of the component. This is a problem, as my actual code is not as simple as the example I posted. In my code, the modal opens on the click of a  button <code>B</code>, which is deep inside <code>Component</code>. So, if I move the modal out from <code>Component</code>, I would have to pass the status and the action to change status (e.g. [open, setOpen]) through  several components until button B (prop drilling).</p>
  </li>
  <li><p>Another solution: On the action <code>onButtonClick</code> I just do the API update, and use a new state <code>updated = true</code>; then, <code>onModalClose</code>, only if updated is true, I run <code>setState</code> so  <code>Component</code> is rendered just after the modal is closed. But this solution seems a hack to me. There must be a better way.</p>
  </li>
  </ol>
  <p>Is there any better solution?</p>