[Perf/bugfix] Separate custom hooks and prevent re-render issues.

Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time.
Set threshold data when started python.

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+};