useIsomorphicLayoutEffect

useLayoutEffect in the browser, useEffect on the server.

HooksState@gaudi/design-system/hooks/state/use-isomorphic-layout-effectView in Storybook Source

For measure-before-paint code in components that also render on the server. CodeBlock, EventCalendar and Flow use it.

Usage

import { useIsomorphicLayoutEffect } from '@gaudi/design-system/hooks';
useIsomorphicLayoutEffect(() => {  setHeight(ref.current.scrollHeight);}, [content]);

Examples

Measure before paint

Storybook

API

1 option

1 return value

Accessibility

Measuring before paint avoids visible jumps that can disorient readers and move focus targets.

Notes

Prefer useEffect unless you must read layout before the browser paints.

CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examples EventCalendarSchedule events across day, week, month, agenda and resource views.5 examples FlowA node-and-edge canvas for workflows, pipelines, agent trees and driver maps, themed with Gaudi tokens and built on React Flow.5 examples