diff --git a/packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.tsx b/packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.tsx
index 08333b1161..66bb5f48c0 100644
--- a/packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.tsx
+++ b/packages/core-app-api/src/apis/implementations/FeatureFlagsApi/LocalStorageFeatureFlags.tsx
@@ -61,7 +61,8 @@ export class LocalStorageFeatureFlags implements FeatureFlagsApi {
     const flags = this.registeredFeatureFlags;
     const activeFlags = flags.filter(flag => this.isActive(flag.name));
     const idleFlags = flags.filter(flag => !this.isActive(flag.name));
-    return [...activeFlags, ...idleFlags];
+    this.registeredFeatureFlags = [...activeFlags, ...idleFlags];
+    return this.registeredFeatureFlags.slice();
   }
 
   getRegisteredFlags(): FeatureFlag[] {
diff --git a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
index be61df887f..d5943c4e8c 100644
--- a/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   List,
   TextField,
@@ -36,14 +36,21 @@ import ClearIcon from '@material-ui/icons/Clear';
 export const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
 
-  const featureFlags = featureFlagsApi.getSortedFlags();
+  const inputRef = React.useRef<HTMLElement>();
+  const [isFirstLoad, setIsFirstLoad] = React.useState<boolean>(true);
+  useEffect(() => {
+    if (isFirstLoad) setIsFirstLoad(false);
+  }, [isFirstLoad]);
+
+  const featureFlags = isFirstLoad
+    ? featureFlagsApi.getSortedFlags()
+    : featureFlagsApi.getRegisteredFlags();
   const initialFlagState = Object.fromEntries(
     featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),
   );
 
   const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
   const [filterInput, setFilterInput] = useState<string>('');
-  const inputRef = React.useRef<HTMLElement>();
 
   const toggleFlag = useCallback(
     (flagName: string) => {