refactor: optimize debounced save functionality (#7495)

This commit is contained in:
naman-bruno
2026-03-16 16:47:27 +05:30
committed by GitHub
parent 7e0b8d9f9d
commit c1dff11fa1
6 changed files with 217 additions and 15 deletions

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useCallback } from 'react';
import React, { useEffect, useCallback, useRef } from 'react';
import { useFormik } from 'formik';
import { useSelector, useDispatch } from 'react-redux';
import { savePreferences } from 'providers/ReduxStore/slices/app';
@@ -73,16 +73,19 @@ const Beta = ({ close }) => {
.catch((err) => console.log(err) && toast.error('Failed to update beta preferences'));
}, [dispatch, preferences]);
const handleSaveRef = useRef(handleSave);
handleSaveRef.current = handleSave;
const debouncedSave = useCallback(
debounce((values) => {
betaSchema.validate(values, { abortEarly: true })
.then((validatedValues) => {
handleSave(validatedValues);
handleSaveRef.current(validatedValues);
})
.catch((error) => {
});
}, 500),
[handleSave, betaSchema]
[betaSchema]
);
// Auto-save when form values change
@@ -91,7 +94,7 @@ const Beta = ({ close }) => {
debouncedSave(formik.values);
}
return () => {
debouncedSave.cancel();
debouncedSave.flush();
};
}, [formik.values, formik.dirty, formik.isValid, debouncedSave]);

View File

@@ -68,7 +68,7 @@ const Cache = () => {
debouncedSave(formik.values);
}
return () => {
debouncedSave.cancel();
debouncedSave.flush();
};
}, [formik.values, formik.dirty, formik.isValid, debouncedSave]);

View File

@@ -38,11 +38,14 @@ const Font = () => {
});
}, [dispatch, preferences]);
const handleSaveRef = useRef(handleSave);
handleSaveRef.current = handleSave;
const debouncedSave = useCallback(
debounce((font, fontSize) => {
handleSave(font, fontSize);
handleSaveRef.current(font, fontSize);
}, 500),
[handleSave]
[]
);
useEffect(() => {
@@ -52,7 +55,7 @@ const Font = () => {
}
debouncedSave(codeFont, codeFontSize);
return () => {
debouncedSave.cancel();
debouncedSave.flush();
};
}, [codeFont, codeFontSize, debouncedSave]);

View File

@@ -127,16 +127,19 @@ const General = () => {
.catch((err) => console.log(err) && toast.error('Failed to update preferences'));
}, [dispatch, preferences]);
const handleSaveRef = useRef(handleSave);
handleSaveRef.current = handleSave;
const debouncedSave = useCallback(
debounce((values) => {
preferencesSchema.validate(values, { abortEarly: true })
.then((validatedValues) => {
handleSave(validatedValues);
handleSaveRef.current(validatedValues);
})
.catch((error) => {
});
}, 500),
[handleSave]
[]
);
useEffect(() => {
@@ -144,7 +147,7 @@ const General = () => {
debouncedSave(formik.values);
}
return () => {
debouncedSave.cancel();
debouncedSave.flush();
};
}, [formik.values, formik.dirty, formik.isValid, debouncedSave]);

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useCallback } from 'react';
import React, { useEffect, useCallback, useRef } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import debounce from 'lodash/debounce';
@@ -75,11 +75,14 @@ const ProxySettings = ({ close }) => {
});
}, [dispatch, preferences, proxySchema]);
const onUpdateRef = useRef(onUpdate);
onUpdateRef.current = onUpdate;
const debouncedSave = useCallback(
debounce((values) => {
onUpdate(values);
onUpdateRef.current(values);
}, 500),
[onUpdate]
[]
);
const [passwordVisible, setPasswordVisible] = useState(false);
@@ -107,7 +110,7 @@ const ProxySettings = ({ close }) => {
debouncedSave(formik.values);
}
return () => {
debouncedSave.cancel();
debouncedSave.flush();
};
}, [formik.values, formik.dirty, debouncedSave]);