useIsomorphicLayoutEffect

Category

Lifecycle

Export Size

145 B

Last Changed

5 days ago

useLayoutEffect on the client, useEffect on the server

Demo

Usage

import { useIsomorphicLayoutEffect } from '@reause/shared'
import { useRef } from 'react'

const boxRef = useRef<HTMLDivElement>(null)

useIsomorphicLayoutEffect(() => {
  // on the client this runs after the DOM is committed and before the browser
  // paints — a real measurement, in the same frame
  setWidth(boxRef.current?.getBoundingClientRect().width ?? 0)
}, [])

Type Declarations

export const useIsomorphicLayoutEffect

Source

Source · Demo · react-use

Contributors

Changelog

v0.1.6 on

c342f - feat(shared): add useIsomorphicLayoutEffect and adopt it in useId (#923)