Skip to content

useIsomorphicLayoutEffect

Custom hook that uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).

Usage

tsx
import { useIsomorphicLayoutEffect } from 'vhooks'

export default function Component() {
  useIsomorphicLayoutEffect(() => {
    console.log(
      "In the browser, I'm an `useLayoutEffect`, but in SSR, I'm an `useEffect`.",
    )
  }, [])

  return <p>Hello, world</p>
}

Installation

sh
pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsomorphicLayoutEffect.json -e %src%/hooks
sh
npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsomorphicLayoutEffect.json -e %src%/hooks
sh
bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsomorphicLayoutEffect.json -e %src%/hooks
sh
yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsomorphicLayoutEffect.json -e %src%/hooks

API

useIsomorphicLayoutEffect(effect, deps?): void

Custom hook that uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).

Parameters

NameTypeDescription
effectEffectCallbackThe effect function to be executed.
deps?DependencyList-

Returns

void

Hook

ts
import { useEffect, useLayoutEffect } from 'react'

export const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect

vDocs