Isomorphic Layout Effect
A hook that uses useLayoutEffect on the client and useEffect on the server.
Code
snippets/react/use-isomorphic-layout-effect.ts
import { useEffect, useLayoutEffect } from "react";
export const useIsomorphicLayoutEffect =
typeof window === "undefined" ? useEffect : useLayoutEffect;
Examples
snippets/react/use-isomorphic-layout-effect.example.tsx
import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
const Page = () => {
useIsomorphicLayoutEffect(() => {});
return <main />;
};
export default Page;
Tests
snippets/react/use-isomorphic-layout-effect.test.ts
import { describe } from "bun:test";
describe.todo("useIsomorphicLayoutEffect", () => {});