Ensure that persisted state is kept in sync (#12596)

This commit is contained in:
Nicolas Mowen 2024-07-24 11:17:32 -06:00 committed by GitHub
parent 1bd3285679
commit 5c15659a34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 8 deletions

View File

@ -38,12 +38,22 @@ export function usePersistedOverlayState<S extends string>(
(value: S | undefined, replace?: boolean) => void, (value: S | undefined, replace?: boolean) => void,
() => void, () => void,
] { ] {
const [persistedValue, setPersistedValue, , deletePersistedValue] =
usePersistence<S>(key, defaultValue);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const currentLocationState = useMemo(() => location.state, [location]); const currentLocationState = useMemo(() => location.state, [location]);
// currently selected value
const overlayStateValue = useMemo<S | undefined>(
() => location.state && location.state[key],
[location, key],
);
// saved value from previous session
const [persistedValue, setPersistedValue, , deletePersistedValue] =
usePersistence<S>(key, overlayStateValue);
const setOverlayStateValue = useCallback( const setOverlayStateValue = useCallback(
(value: S | undefined, replace: boolean = false) => { (value: S | undefined, replace: boolean = false) => {
setPersistedValue(value); setPersistedValue(value);
@ -56,11 +66,6 @@ export function usePersistedOverlayState<S extends string>(
[key, currentLocationState, navigate], [key, currentLocationState, navigate],
); );
const overlayStateValue = useMemo<S | undefined>(
() => location.state && location.state[key],
[location, key],
);
return [ return [
overlayStateValue ?? persistedValue ?? defaultValue, overlayStateValue ?? persistedValue ?? defaultValue,
setOverlayStateValue, setOverlayStateValue,

View File

@ -34,7 +34,6 @@ export function usePersistence<S>(
useEffect(() => { useEffect(() => {
setLoaded(false); setLoaded(false);
setInternalValue(defaultValue);
async function load() { async function load() {
const value = await getData(key); const value = await getData(key);