The signature is identical to useEffect, but it fires synchronously after all DOM mutations.
Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect when possible to avoid blocking visual updates.
If you’re migrating code from a class component, useLayoutEffect fires in the same phase as
componentDidMount and componentDidUpdate.
The signature is identical to
useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled insideuseLayoutEffectwill be flushed synchronously, before the browser has a chance to paint.Prefer the standard
useEffectwhen possible to avoid blocking visual updates.If you’re migrating code from a class component,
useLayoutEffectfires in the same phase ascomponentDidMountandcomponentDidUpdate.