Graphite: Fix infinite loop in text editor when using graphite in a Mixed datasource (#70970)

Fix infinite react state loop exhibited in mixed datasource by stringifying objects in useEffect dependencies
This commit is contained in:
Galen Kistler 2023-06-30 14:00:26 -05:00 committed by GitHub
parent ada325de2a
commit 4217c8057b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -45,7 +45,7 @@ export const GraphiteQueryEditorContext = ({
// synchronise changes provided in props with editor's state
const previousRange = usePrevious(range);
useEffect(() => {
if (previousRange?.raw !== range?.raw) {
if (JSON.stringify(previousRange?.raw) !== JSON.stringify(range?.raw)) {
dispatch(actions.timeRangeChanged(range));
}
}, [dispatch, range, previousRange]);
@ -58,7 +58,7 @@ export const GraphiteQueryEditorContext = ({
},
// adding state to dependencies causes infinite loops
// eslint-disable-next-line react-hooks/exhaustive-deps
[dispatch, queries]
[JSON.stringify(queries)]
);
useEffect(
@ -82,7 +82,7 @@ export const GraphiteQueryEditorContext = ({
},
// adding state to dependencies causes infinite loops
// eslint-disable-next-line react-hooks/exhaustive-deps
[needsRefresh, onChange, onRunQuery, query]
[needsRefresh, JSON.stringify(query)]
);
if (!state) {