title: React Hooks: What is the difference between 'useMutationEffect' and 'useLayoutEffect'?
body: <p>What is the difference between <code>useMutationEffect</code> and <code>useLayoutEffect</code> in term of usage?</p>
  
  <p>I have read all available material online including (but not limited to)</p>
  
  <ol>
  <li><a href="https://reactjs.org/docs/hooks-reference.html" rel="noreferrer">Hooks Reference</a></li>
  <li><a href="https://blog.kentcdodds.com/useeffect-vs-uselayouteffect-vs-usemutationeffect-6a3ee231304a" rel="noreferrer">Blog post by Kent</a></li>
  </ol>
  
  <p>Difference between <code>useEffect</code> and other two hooks is clear. but difference between <code>useMutationEffect</code> and <code>useLayoutEffect</code> is still not clear.</p>
  
  <p>I know the order of execution is:</p>
  
  <ol>
  <li>useMutationEffect</li>
  <li>useLayoutEffect</li>
  <li>useEffect</li>
  </ol>