Use Keyed Layout Effect

1"use client";
2 
3import { useEffect, useLayoutEffect } from "react";
4 
5const useIsomorphicLayoutEffect =
6  typeof window === "undefined" ? useEffect : useLayoutEffect;
7 
8/**
9 * Layout-timed variant for DOM measurement/scroll/focus lifecycles that must
10 * run before paint. Prefer `use-keyed-mount-effect` for ordinary post-commit
11 * effects.
12 */
13export function useKeyedLayoutEffect(
14  key: string | null,
15  effect: () => void | (() => void),
16) {
17  useIsomorphicLayoutEffect(() => {
18    if (key === null) return;
19    return effect();
20    // The effect closure is intentionally captured at each key change.
21  }, [key]);
22}