Docs
useIsomorphicLayoutEffect

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

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-isomorphic-layout-effect

Usage

"use client"
 
import { useIsomorphicLayoutEffect } from "@/hooks/isomorphic-layout-effect"
 
export function Component() {
  useIsomorphicLayoutEffect(() => {
    console.log(
      "In the browser, I'm an `useLayoutEffect`, but in SSR, I'm an `useEffect`."
    )
  }, [])
 
  return <p>Hello, world</p>
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
effectEffectCallbackThe effect function to be executed.-No
depsDependencyListThe dependencies of the effect.undefinedYes

Return Values

NameTypeDescription
Functionvoid-