Respect to when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue
useLayoutEffect在DOM更新之后执行;useEffect在render渲染结束后执行。执行示例代码会发现useLayoutEffect永远比useEffect先执行,这是因为DOM更新之后,渲染才结束或者渲染还会结束。
Used in rare cases when you need to calculate the distance between elements after an update or do other post-update calculations / side-effects.
I feel like the docs do a pretty good example of explaining this one. If you have a custom hook, and you'd like to label it within React DevTools, then this is what you use.