useIsomorphicLayoutEffect
A hook to use layout effect on the client side
useIsomorphicLayoutEffect
npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-isomorphic-layout-effect.json"
pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-isomorphic-layout-effect.json"
yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-isomorphic-layout-effect.json"
bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-isomorphic-layout-effect.json"
Copy and paste the following code into your project.
import { useEffect, useLayoutEffect } from 'react'
import { isBrowser } from '@/registry/lib/is-browser'
/**
* Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
* @param {Function} effect - The effect function to be executed.
* @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
* @public
* @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
* @example
* ```tsx
* useIsomorphicLayoutEffect(() => {
* // Code to be executed during the layout phase on the client side
* }, [dependency1, dependency2]);
* ```
*/
export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect
credits
Last updated on