useIsomorphicLayoutEffect

Overview

In SSR mode, the following warning will appear when useLayoutEffect is used

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useIsomorphicLayoutEffect.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useIsomorphicLayoutEffect.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useIsomorphicLayoutEffect.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useIsomorphicLayoutEffect.json

In SSR mode, the following warning will appear when useLayoutEffect is used

⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

To avoid this warning, useIsomorphicLayoutEffect can be used instead of useLayoutEffect.

The source code of useIsomorphicLayoutEffect is:

const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;

Return useLayoutEffect for browser environment and useEffect for other environments.

For more information, please refer to useLayoutEffect and SSR