1 files changed, 13 insertions, 0 deletions
diff --git a/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx
new file mode 100644
index 0000000..59a7899
--- /dev/null
+++ b/examples/design-system/packages/acme-utils/src/useIsomorphicLayoutEffect.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? React.useLayoutEffect : () => {};
+
+export { useIsomorphicLayoutEffect };