Feat(web-react): Introduce useIsomorphicLayoutEffect hook

  * avoid using `useLayoutEffect` hook on server side
  * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
  * @see https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
  * @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

packages/web-react/src/hooks/index.ts

@@ -1,9 +1,10 @@
-export * from './useClassNamePrefix';
+export * from './styleProps';
 export * from './useCancelEvent';
+export * from './useClassNamePrefix';
 export * from './useClickOutside';
 export * from './useDeprecationMessage';
 export * from './useDragAndDrop';
 export * from './useIcon';
+export * from './useIsomorphicLayoutEffect';
 export * from './useLastActiveFocus';
 export * from './useToggle';
-export * from './styleProps';

packages/web-react/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,9 @@
+/**
+ * This file fixes the problem of using useLayoutEffect hook on the server side.
+ * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+ */
+/* eslint-disable no-restricted-imports */
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;