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
Name | Type | Description |
---|---|---|
effect | EffectCallback | The effect function to be executed. |
deps? | DependencyList | - |
Returns
void
Hook
ts
import { useEffect, useLayoutEffect } from 'react'
export const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect