web-react: Avoid using useLayoutEffect hook on the server side

packages/web-react/.eslintrc.js

@@ -65,5 +65,16 @@ module.exports = {
     'import/no-extraneous-dependencies': ['error', { packageDir: ['./', '../../'] }],
     // disable double quotes
     quotes: ['warn', 'single'],
+    // use useIsomorphicLayoutEffect instead of useLayoutEffect
+    // @see: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+    'no-restricted-imports': [
+      'error',
+      // Disabling using of useLayoutEffect from react
+      {
+        name: 'react',
+        importNames: ['useLayoutEffect'],
+        message: '`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`',
+      },
+    ],
   },
 };

packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts

@@ -1,4 +1,5 @@
-import { RefObject, useLayoutEffect } from 'react';
+import { RefObject } from 'react';
+import { useIsomorphicLayoutEffect } from '../../hooks';
 import { FileMetadata } from '../../types/fileUploader';
 import { getAttachmentInput, getAttachmentMetaInput } from './utils';
 
@@ -17,7 +18,7 @@ export const useFileUploaderAttachment = ({
   meta,
   onError,
 }: UseFileUploaderAttachmentProps) => {
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const createAttachmentInput = (metadata: FileMetadata) => {
       attachmentRef.current?.querySelectorAll('input').forEach((element) => element.remove());
       const attachmentInputElement = getAttachmentInput(file, name, onError);

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/useClickOutside.ts

@@ -1,4 +1,5 @@
-import { useLayoutEffect, useCallback, MutableRefObject } from 'react';
+import { MutableRefObject, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 export interface UseClickOutsideProps {
   ref: MutableRefObject<HTMLElement | null>;
@@ -34,7 +35,7 @@ export const useClickOutside = ({ ref, callback }: UseClickOutsideProps): void =
     [ref, callback],
   );
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     document.addEventListener('click', clickHandler, { capture: true });
 
     return () => document.removeEventListener('click', clickHandler, { capture: true });

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;