feat(utils): added useIsomorphicLayoutEffect from react-redux

Author: mlaursen

packages/utils/src/index.ts

@@ -23,6 +23,7 @@ export * from "./getPercentage";
 export * from "./nearest";
 
 export * from "./useEnsuredRef";
+export * from "./useIsomorphicLayoutEffect";
 export { default as useToggle } from "./useToggle";
 export { default as useInterval } from "./useInterval";
 export { default as useTimeout } from "./useTimeout";

packages/utils/src/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * This is copy/pasted from react-redux which has some more information about
+ * this and how to fix "invalid" warnings while running tests.
+ *
+ * @see https://github.com/reduxjs/react-redux/blob/4c907c0870c6b9a136dd69be294c17d1dc63c8f5/src/utils/useIsomorphicLayoutEffect.js
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+    ? useLayoutEffect
+    : useEffect;