# 不常用的Hooks post=>theresia emt|January 12, 2021|814|305|https://lh3.googleusercontent.com/a-/AOh14GhPb7zfSSYTvNA6psX28gfeiA5br7m1iPhwq72_-Q=s96-c tags=>React|React Hooks|你当书签的样子真的很狼狈 ## useEffect + 在渲染结束之后执行 ## useLayoutEffect + 在DOM更新之后执行 ### useEffect 和 useLayoutEffect 差别 > Respect to [when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue](https://stackoverflow.com/questions/57005663/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](https://reactjs.org/docs/hooks-reference.html#usedebugvalue) 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.