title: Is `useLayoutEffect` preferable to `useEffect` when reading layout?
body: <p>One difference about <code>useLayoutEffect</code> vs <code>useEffect</code> is that <code>useLayoutEffect</code> will be fired synchronously after DOM mutation and before the browser paint phase. (<a href="https://stackoverflow.com/questions/53513872/react-hooks-what-is-the-difference-between-usemutationeffect-and-uselayoutef">Reference</a>)</p>
  <p>However, I've came across some articles and they all seem to recommend to use <code>useLayoutEffect</code> for reading layout.</p>
  <p><a href="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" rel="nofollow noreferrer">React docs:</a></p>
  <blockquote>
  <p>The signature is identical to useEffect, but it fires synchronously after all DOM mutations. <em>Use this to read layout from the DOM and synchronously re-render</em>. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.</p>
  </blockquote>
  <p><a href="https://kentcdodds.com/blog/useeffect-vs-uselayouteffect" rel="nofollow noreferrer">Kent C.Dodds</a>:</p>
  <blockquote>
  <p>useLayoutEffect: If you need to mutate the DOM and/or <em>do need to perform measurements</em>.</p>
  </blockquote>
  <p><a href="https://blog.logrocket.com/useeffect-vs-uselayouteffect/" rel="nofollow noreferrer">Ohans Emmanuel:</a></p>
  <blockquote>
  <p>Where possible, choose the useEffect Hook for cases where you want to be unobtrusive in the dealings of the browser paint process. In the real world, this is usually most times! <em>Well, except when you’re reading layout from the DOM</em> or doing something DOM-related that needs to be painted ASAP.</p>
  </blockquote>
  <p>As I understand, by the time the <code>useEffect</code> is fired, the browser has already passed the layout and paint phase, so reading layout in <code>useEffect</code> should be totally okay.</p>
  <p>So my question: Is <code>useLayoutEffect</code> preferable to <code>useEffect</code> when reading layout and if yes, why? Taken that I just only read the layout and don't perform any additional state changes in the effect.</p>