Fix(web-react): Replace useLayoutEffect with useIsomorphicLayoutEffect

* to avoid error messages while rendering on the server side
lmc-eu · Nov 8, 2023 · ea9f333 · ea9f333
1 parent 563b7fb
commit ea9f333
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts b/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);

diff --git a/packages/web-react/src/hooks/useClickOutside.ts b/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 });