diff --git a/src/devtools/views/Components/Components.js b/src/devtools/views/Components/Components.js
index 2e22471929..997d051678 100644
--- a/src/devtools/views/Components/Components.js
+++ b/src/devtools/views/Components/Components.js
@@ -28,7 +28,7 @@ function Components(_: {||}) {
-
+
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 06e74b2f6f..efa729d258 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/src/devtools/views/Profiler/Profiler.js
@@ -111,7 +111,7 @@ function Profiler(_: {||}) {
{sidebar}
-
+
);
diff --git a/src/devtools/views/Settings/SettingsModal.js b/src/devtools/views/Settings/SettingsModal.js
index 4dd6bafa4f..d6618a6fed 100644
--- a/src/devtools/views/Settings/SettingsModal.js
+++ b/src/devtools/views/Settings/SettingsModal.js
@@ -6,7 +6,6 @@ import React, {
useEffect,
useMemo,
useRef,
- useState,
} from 'react';
import { SettingsModalContext } from './SettingsModalContext';
import Store from 'src/devtools/store';
@@ -14,7 +13,11 @@ import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import TabBar from '../TabBar';
import { StoreContext } from '../context';
-import { useModalDismissSignal, useSubscription } from '../hooks';
+import {
+ useLocalStorage,
+ useModalDismissSignal,
+ useSubscription,
+} from '../hooks';
import ComponentsSettings from './ComponentsSettings';
import GeneralSettings from './GeneralSettings';
import ProfilerSettings from './ProfilerSettings';
@@ -23,11 +26,7 @@ import styles from './SettingsModal.css';
type TabID = 'general' | 'components' | 'profiler';
-type Props = {|
- defaultTabID: TabID,
-|};
-
-export default function SettingsModal({ defaultTabID = 'general' }: Props) {
+export default function SettingsModal(_: {||}) {
const { isModalShowing, setIsModalShowing } = useContext(
SettingsModalContext
);
@@ -55,16 +54,19 @@ export default function SettingsModal({ defaultTabID = 'general' }: Props) {
return null;
}
- return ;
+ return ;
}
-function SettingsModalImpl({ defaultTabID }: Props) {
+function SettingsModalImpl(_: {||}) {
const { setIsModalShowing } = useContext(SettingsModalContext);
const dismissModal = useCallback(() => setIsModalShowing(false), [
setIsModalShowing,
]);
- const [selectedTabID, selectTab] = useState(defaultTabID);
+ const [selectedTabID, selectTab] = useLocalStorage(
+ 'React::DevTools::selectedSettingsTabID',
+ 'general'
+ );
const modalRef = useRef(null);
useModalDismissSignal(modalRef, dismissModal);
@@ -117,18 +119,15 @@ const tabs = [
id: 'general',
icon: 'settings',
label: 'General',
- title: 'General preferences',
},
{
id: 'components',
icon: 'components',
label: 'Components',
- title: 'Components preferences',
},
{
id: 'profiler',
icon: 'profiler',
label: 'Profiler',
- title: 'Profiler preferences',
},
];