useLayoutEffect

Runs a function after the component is rendered, or when a value provided in the optional dependency array has changed.

Similar to useEffect, but it runs synchronously before the browser paints. It's useful when you want to perform an action after the component has been rendered, but before the browser paints.


This hook should be used with caution - updates to state from within the hook will block the browser from rendering.

Example

import { ButtonWithTooltip } from "./ButtonWithTooltip"

function App() {
  return (
    <div>
      <ButtonWithTooltip
        tooltipContent={
          <div>
            This tooltip does not fit above the button.
            <br />
            This is why it's displayed below instead!
          </div>
        }
      >
        Hover over me (tooltip above)
      </ButtonWithTooltip>
      <div style={{ height: "50px" }} />
      <ButtonWithTooltip
        tooltipContent={<div>This tooltip fits above the button</div>}
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
      <div style={{ height: "50px" }} />
      <ButtonWithTooltip
        tooltipContent={<div>This tooltip fits above the button</div>}
      >
        Hover over me (tooltip below)
      </ButtonWithTooltip>
    </div>
  )
}

Related