Fixed infinite re-render of variable dropdown setting

frontend/src/Components/BuildDialog/UnityPackageConfigurations.tsx

 import { SettingAccordion } from '../Settings/SettingAccordion'
 import { Setting } from '../Settings/Setting'
 import { value_t } from '../../@types/Settings'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 export const UnityPackageConfigurations = ({ packages }) => {
     const [packageDescriptions, setPackageDescriptions] = useState<any[]>([])
     const [visible, setVisible] = useState(true)    // used to force redraw, no other purpose
 
-    const loadPackageSettings = async () => {
+    const loadPackageSettings = useCallback(async () => {
         for(const packageDescription of packages) {
             const packageConfig = await api.invoke(api.channels.toMain.getPackageSetting, packageDescription.name)
             if(packageConfig !== undefined) {
@@ -16,7 +16,7 @@ export const UnityPackageConfigurations = ({ packages }) => {
         }
         setPackageDescriptions(packages)
         setVisible(true)
-    }
+    }, [packages])
 
     const sendUpdateToBackend = async (uuid: string, newValue: value_t) => {
         await api.invoke(api.channels.toMain.changePackageSetting, uuid, newValue)
@@ -37,11 +37,11 @@ export const UnityPackageConfigurations = ({ packages }) => {
         }
 
         init()
-    })
+    }, [packages, loadPackageSettings])
 
     const drawPackageConfig = (packageDescription) => {
         return <>
-            {(visible || true) &&
+            {(visible) &&
                 Object.entries(packageDescription['configDescription'])
                     .map(([name, setting]) => {
                         const id = packageDescription['name'] + '.' + name

frontend/src/Components/Settings/VariableDropDownSetting.tsx

 import { Button, SelectMenu } from 'evergreen-ui'
 import { SettingEntryLabel } from '../StyledComponents/Preferences/StyledSettings'
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react'
 
 export const VariableDropDownSetting = ({ id, uuid, label, value, onChange }) => {
     const [variables, setVariables] = useState<object[]>([])
@@ -12,14 +12,15 @@ export const VariableDropDownSetting = ({ id, uuid, label, value, onChange }) =>
         setVariables(loadedVariables || [])
     }
 
+    const updateOptions = useCallback (() => {
+        setOptions(variables.map(variable => ({ label: variable["name"], value: variable["name"] })))
+    }, [variables])
+
     useEffect(() => {
         loadVariables()
         updateOptions()
-    })
+    }, [updateOptions])
 
-    function updateOptions() {
-        setOptions(variables.map(variable => ({ label: variable["name"], value: variable["name"] })))
-    }
 
     const onSelect = (item) => {
         setSelected(item)