Fix React Error on setState while rendering a different component

src/Components/App/Actions/MenuActions.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 import { IConfiguration } from '../../../Interfaces/IConfiguration';
 import { FetchConfiguration } from '../../API/api';
 import { IEditorState } from '../../../Interfaces/IEditorState';
@@ -7,18 +7,10 @@ import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
 
 export function NewEditor(
   editorState: IEditorState,
-  setEditorState: Dispatch<SetStateAction<IEditorState>>,
+  setEditorState: (newState: IEditorState) => void,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  enableLoaded: () => void
 ): void {
-  if (DISABLE_API) {
+  UseLoadOnBoot(enableLoaded, editorState);
-    setLoaded(true);
-    return;
-  }
-
-  if (editorState.configuration !== undefined) {
-    setLoaded(true);
-    return;
-  }
 
   // Fetch the configuration from the API
   FetchConfiguration()
@@ -27,13 +19,25 @@ export function NewEditor(
       const editorState: IEditorState = GetDefaultEditorState(configuration);
 
       setEditorState(editorState);
-      setLoaded(true);
+      enableLoaded();
     }, (error) => {
       console.debug('[NewEditor] Could not fetch resource from API. Using default.', error);
-      setLoaded(true);
+      enableLoaded();
     });
 }
 
+function UseLoadOnBoot(enableLoaded: () => void, editorState: IEditorState): void {
+  useEffect(() => {
+    if (DISABLE_API) {
+      enableLoaded();
+      return;
+    }
+    if (editorState.configuration !== undefined) {
+      enableLoaded();
+    }
+  }, []);
+}
+
 export function LoadEditor(
   files: FileList | null,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,

src/Components/App/App.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
 import { events as EVENTS } from '../../Events/AppEvents';
 import { MainMenu } from '../MainMenu/MainMenu';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
@@ -107,6 +107,10 @@ export function App(props: IAppProps): JSX.Element {
 
   UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded);
 
+  const enableLoaded = useCallback(() => {
+    setLoaded(true);
+  }, []);
+
   if (isLoaded) {
     return (
       <div
@@ -130,7 +134,9 @@ export function App(props: IAppProps): JSX.Element {
     >
       <MainMenu
         newEditor={() => NewEditor(
-          editorState, setEditorState, setLoaded
+          editorState,
+          (newEditor) => setEditorState(newEditor),
+          enableLoaded
         )}
         loadEditor={(files: FileList | null) => LoadEditor(
           files,