useEffect

在渲染结束之后执行

useLayoutEffect

在DOM更新之后执行

useEffect 和 useLayoutEffect 差别

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.

useDebugValue

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.