useLayoutEffect vs useEffect

useEffect

• Fires after render (to virtual DOM) and browser paint
• Will not block the browser from updating the screen as it runs asynchronously
• Useful for side effects which are not concerned with DOM information

useLayoutEffect

• Similar to componentDidMount/componentDidUpdate
• Runs synchronously run after the DOM has been modified
• For effects when, e.g. 'a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency'
• Useful for when you need to read the size or position of a DOM node before the next browser paint

Resources

• Dan Abramov on componentDidMount vs useEffect
• Kent C Dodds on useEffect vs useLayoutEffect
• Brian Vaughn on synchronous/asynchrounous nature of hooks
• Visual diagram on hook flow