Fix for rendering less hooks

src/panelWebView/components/Collapsible.tsx

@@ -14,6 +14,22 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, chi
   const [ isOpen, setIsOpen ] = React.useState(false);
   const collapseKey = `collapse-${id}`;
 
+  useEffect(() => {
+    const collapsed = window.localStorage.getItem(collapseKey);
+    if (collapsed === null || collapsed === 'true') {
+      setIsOpen(true);
+      updateStorage(true);
+    }
+
+    window.addEventListener('message', event => {
+      const message = event.data;
+      if (message.command === Command.closeSections) {
+        setIsOpen(false);
+        updateStorage(false);
+      }
+    });
+  }, ['']);
+
   const updateStorage = (value: boolean) => {
     window.localStorage.setItem(collapseKey, value.toString());
   }
@@ -32,22 +48,6 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, chi
     }
   }
 
-  useEffect(() => {
-    const collapsed = window.localStorage.getItem(collapseKey);
-    if (collapsed === null || collapsed === 'true') {
-      setIsOpen(true);
-      updateStorage(true);
-    }
-
-    window.addEventListener('message', event => {
-      const message = event.data;
-      if (message.command === Command.closeSections) {
-        setIsOpen(false);
-        updateStorage(false);
-      }
-    });
-  }, ['']);
-
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
       <div className={`section collapsible__body ${className || ""}`} slot="body">

src/panelWebView/components/Fields/TextField.tsx

@@ -13,17 +13,17 @@ export interface ITextFieldProps {
 
 export const TextField: React.FunctionComponent<ITextFieldProps> = ({singleLine, limit, label, value, rows, onChange}: React.PropsWithChildren<ITextFieldProps>) => {
   const [ text, setText ] = React.useState<string | null>(value);
-  
-  const onTextChange = (txtValue: string) => {
-    setText(txtValue);
-    onChange(txtValue);
-  };
 
   React.useEffect(() => {
     if (text !== value) {
       setText(value);
     }
   }, [ value ]);
+  
+  const onTextChange = (txtValue: string) => {
+    setText(txtValue);
+    onChange(txtValue);
+  };
 
   let isValid = true;
   if (limit && limit !== -1) {