diff --git a/public/app/features/logs/components/LogDetailsRow.tsx b/public/app/features/logs/components/LogDetailsRow.tsx
index c83e467a907..20af14fc806 100644
--- a/public/app/features/logs/components/LogDetailsRow.tsx
+++ b/public/app/features/logs/components/LogDetailsRow.tsx
@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import { isEqual } from 'lodash';
 import memoizeOne from 'memoize-one';
 import React, { PureComponent } from 'react';
 
@@ -161,6 +162,12 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
     fieldStats: null,
   };
 
+  componentDidUpdate() {
+    if (this.state.showFieldsStats) {
+      this.updateStats();
+    }
+  }
+
   showField = () => {
     const { onClickShowField: onClickShowDetectedField, parsedKey, row } = this.props;
     if (onClickShowDetectedField) {
@@ -213,13 +220,20 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
     });
   };
 
+  updateStats = () => {
+    const { getStats } = this.props;
+    const fieldStats = getStats();
+    const fieldCount = fieldStats ? fieldStats.reduce((sum, stat) => sum + stat.count, 0) : 0;
+    if (!isEqual(this.state.fieldStats, fieldStats) || fieldCount !== this.state.fieldCount) {
+      this.setState({ fieldStats, fieldCount });
+    }
+  };
+
   showStats = () => {
-    const { getStats, isLabel, row, app } = this.props;
+    const { isLabel, row, app } = this.props;
     const { showFieldsStats } = this.state;
     if (!showFieldsStats) {
-      const fieldStats = getStats();
-      const fieldCount = fieldStats ? fieldStats.reduce((sum, stat) => sum + stat.count, 0) : 0;
-      this.setState({ fieldStats, fieldCount });
+      this.updateStats();
     }
     this.toggleFieldsStats();