move hooks before early return

ibexa · Oct 18, 2023 · 669150b · 669150b
1 parent 8d41b16
commit 669150b
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js
@@ -32,11 +32,22 @@ const Popup = ({
     noCloseBtn,
     extraClasses,
 }) => {
+    const modalRef = useRef(null);
+
+    useEffect(() => {
+        document.body.classList.toggle(CLASS_MODAL_OPEN, isVisible);
+        document.body.classList.toggle(CLASS_NON_SCROLLABLE, isVisible);
+
+        if (isVisible) {
+            showPopup();
+            modalRef.current.addEventListener('hidden.bs.modal', onClose);
+        }
+    }, [isVisible]);
+
     if (!isVisible) {
         return null;
     }
 
-    const modalRef = useRef(null);
     const modalClasses = createCssClassNames({
         'c-popup modal fade': true,
         'c-popup--no-header': noHeader,
@@ -79,16 +90,6 @@ const Popup = ({
         );
     }, [hidePopup, closeBtnLabel, noCloseBtn]);
 
-    useEffect(() => {
-        document.body.classList.toggle(CLASS_MODAL_OPEN, isVisible);
-        document.body.classList.toggle(CLASS_NON_SCROLLABLE, isVisible);
-
-        if (isVisible) {
-            showPopup();
-            modalRef.current.addEventListener('hidden.bs.modal', onClose);
-        }
-    }, [isVisible]);
-
     return (
         <div ref={modalRef} className={modalClasses} tabIndex={hasFocus ? -1 : undefined}>
             <div className={`modal-dialog c-popup__dialog ${MODAL_SIZE_CLASS[size]}`} role="dialog">