title: what's the difference between getDerivedStateFromError and componentDidCatch
body: <p>What I understood from <a href="https://www.reddit.com/r/reactjs/comments/9lp0k3/new_lifecycle_method_getderivedstatefromerror/" rel="noreferrer">here</a>:</p>
  
  <p><code>componentDidCatch</code>:</p>
  
  <ul>
  <li>is called always in the browser</li>
  <li>is called during the "commit phase" when the DOM has already been updated</li>
  <li>should be used for something like error's reporting </li>
  </ul>
  
  <p><code>getDerivedStateFromError</code>:</p>
  
  <ul>
  <li>is also called during server-side-rendering</li>
  <li>is called in "render phase" when the DOM has not yet been updated</li>
  <li>should be used for rendering a fallback UI</li>
  </ul>
  
  <p>Still, I'm bit confused about some things:</p>
  
  <ol>
  <li>are they both catching the same type of errors? or each lifecycle
  will catch the different error? </li>
  <li>should I always use both (in the same "error-catching" component possibly)?</li>
  <li><em>"using componentDidCatch for error recovery is not optimal because it forces the fallback UI to always render synchronously"</em> what's wrong with that?</li>
  </ol>