diff --git a/ui/perfherder/graphs/GraphsView.jsx b/ui/perfherder/graphs/GraphsView.jsx
index e270d60476b..15b21a0bbc6 100644
--- a/ui/perfherder/graphs/GraphsView.jsx
+++ b/ui/perfherder/graphs/GraphsView.jsx
@@ -102,7 +102,6 @@ function GraphsView({ projects, frameworks, user }) {
       repository_name: repositoryName,
       signature_id: signatureId,
       framework_id: frameworkId,
-      replicates: seriesReplicates,
     } = series;
 
     return {
@@ -111,7 +110,7 @@ function GraphsView({ projects, frameworks, user }) {
       framework: frameworkId,
       interval: timeRangeRef.current.value,
       all_data: true,
-      replicates: seriesReplicates,
+      replicates: replicatesRef.current,
     };
   }, []);
 
@@ -319,6 +318,10 @@ function GraphsView({ projects, frameworks, user }) {
   );
 
   const updateStateParams = useCallback((state) => {
+    const replicatesChanged =
+      state.replicates !== undefined &&
+      state.replicates !== replicatesRef.current;
+
     if (state.testData !== undefined) setTestData(state.testData);
     if (state.selectedDataPoint !== undefined)
       setSelectedDataPoint(state.selectedDataPoint);
@@ -335,11 +338,24 @@ function GraphsView({ projects, frameworks, user }) {
       setHighlightedRevisions(state.highlightedRevisions);
     if (state.visibilityChanged !== undefined)
       setVisibilityChanged(state.visibilityChanged);
-    if (state.replicates !== undefined) setReplicates(state.replicates);
     if (state.colors !== undefined) setColors(state.colors);
     if (state.symbols !== undefined) setSymbols(state.symbols);
-    pendingChangeParams.current = true;
-  }, []);
+
+    if (state.replicates !== undefined) {
+      setReplicates(state.replicates);
+      replicatesRef.current = state.replicates;
+    }
+
+    if (replicatesChanged) {
+      setZoom({});
+      setSelectedDataPoint(null);
+      setColors([...graphColors]);
+      setSymbols([...graphSymbols]);
+      getTestData();
+    } else {
+      pendingChangeParams.current = true;
+    }
+  }, [getTestData]);
 
   // componentDidMount - check query params
   useEffect(() => {
@@ -357,6 +373,11 @@ function GraphsView({ projects, frameworks, user }) {
 
     const updates = {};
 
+    if (replicatesParam) {
+      updates.replicates = Boolean(parseInt(replicatesParam, 10));
+      replicatesRef.current = updates.replicates;
+    }
+    
     if (series) {
       const _series = typeof series === 'string' ? [series] : series;
       const seriesParams = parseSeriesParam(
@@ -380,9 +401,6 @@ function GraphsView({ projects, frameworks, user }) {
         parseInt(hlInitialDataPoints, 10),
       );
     }
-    if (replicatesParam) {
-      updates.replicates = Boolean(parseInt(replicatesParam, 10));
-    }
     if (hlRevisions) {
       updates.highlightedRevisions =
         typeof hlRevisions === 'string' ? [hlRevisions] : hlRevisions;
@@ -423,11 +441,6 @@ function GraphsView({ projects, frameworks, user }) {
 
     if (prevSearch === location.search) return;
 
-    const { replicates: currentReplicates } = queryString.parse(
-      location.search,
-    );
-    const { replicates: prevReplicates } = queryString.parse(prevSearch);
-
     if (
       location.search === '' &&
       testDataRef.current.length !== 0 &&
@@ -435,12 +448,6 @@ function GraphsView({ projects, frameworks, user }) {
     ) {
       setTestData([]);
     }
-
-    if (prevReplicates !== undefined) {
-      if (currentReplicates !== prevReplicates) {
-        window.location.reload(false);
-      }
-    }
   }, [location.search, loading]);
 
   const handleUpdateTimeRange = useCallback(