From 4eeb6c3ed8649c05a27ad5634f6e65b02a0d6b90 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matias.chomicki@grafana.com>
Date: Mon, 25 Aug 2025 17:50:49 +0200
Subject: [PATCH] Logs Panel: fix conditionally called React hooks (#110113)

* Logs Panel: fix conditionally called React hooks

* Update betterer
---
 .betterer.results                                  | 13 -------------
 .../logs/components/panel/LogLineDetailsFields.tsx | 14 ++++++--------
 .../app/features/logs/components/panel/LogList.tsx | 10 +++++-----
 3 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 6eb58950612..949db01ba60 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2562,19 +2562,6 @@ exports[`better eslint`] = {
     "public/app/features/live/centrifuge/channel.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/features/logs/components/panel/LogLineDetailsFields.tsx:5381": [
-      [0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "0"],
-      [0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "1"],
-      [0, 0, 0, "React Hook \\"useMemo\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "2"],
-      [0, 0, 0, "React Hook \\"useMemo\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "3"],
-      [0, 0, 0, "React Hook \\"useStyles2\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "4"],
-      [0, 0, 0, "React Hook \\"useStyles2\\" is called conditionally. React Hooks must be called in the exact same order in every component render.", "5"]
-    ],
-    "public/app/features/logs/components/panel/LogList.tsx:5381": [
-      [0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "0"],
-      [0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "1"],
-      [0, 0, 0, "React Hook \\"useCallback\\" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?", "2"]
-    ],
     "public/app/features/logs/logsFrame.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
diff --git a/public/app/features/logs/components/panel/LogLineDetailsFields.tsx b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
index e7a503b41c2..3ddd0b29f8f 100644
--- a/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetailsFields.tsx
@@ -25,14 +25,13 @@ interface LogLineDetailsFieldsProps {
 }
 
 export const LogLineDetailsFields = memo(({ disableActions, fields, log, logs, search }: LogLineDetailsFieldsProps) => {
-  if (!fields.length) {
-    return null;
-  }
   const styles = useStyles2(getFieldsStyles);
   const getLogs = useCallback(() => logs, [logs]);
   const filteredFields = useMemo(() => (search ? filterFields(fields, search) : fields), [fields, search]);
 
-  if (filteredFields.length === 0) {
+  if (!fields.length) {
+    return null;
+  } else if (filteredFields.length === 0) {
     return t('logs.log-line-details.search.no-results', 'No results to display.');
   }
 
@@ -73,14 +72,13 @@ interface LogLineDetailsLabelFieldsProps {
 }
 
 export const LogLineDetailsLabelFields = ({ fields, log, logs, search }: LogLineDetailsLabelFieldsProps) => {
-  if (!fields.length) {
-    return null;
-  }
   const styles = useStyles2(getFieldsStyles);
   const getLogs = useCallback(() => logs, [logs]);
   const filteredFields = useMemo(() => (search ? filterLabels(fields, search) : fields), [fields, search]);
 
-  if (filteredFields.length === 0) {
+  if (!fields.length) {
+    return null;
+  } else if (filteredFields.length === 0) {
     return t('logs.log-line-details.search.no-results', 'No results to display.');
   }
 
diff --git a/public/app/features/logs/components/panel/LogList.tsx b/public/app/features/logs/components/panel/LogList.tsx
index bf412711af8..67765c5d307 100644
--- a/public/app/features/logs/components/panel/LogList.tsx
+++ b/public/app/features/logs/components/panel/LogList.tsx
@@ -373,11 +373,6 @@ const LogListComponent = ({
     [initialScrollPosition, permalinkedLogId, processedLogs]
   );
 
-  if (!containerElement || listHeight == null) {
-    // Wait for container to be rendered
-    return null;
-  }
-
   const handleLogLineClick = useCallback(
     (e: MouseEvent<HTMLElement>, log: LogListModel) => {
       if (handleTextSelection(e, log)) {
@@ -403,6 +398,11 @@ const LogListComponent = ({
     [debouncedScrollToItem, filteredLogs]
   );
 
+  if (!containerElement || listHeight == null) {
+    // Wait for container to be rendered
+    return null;
+  }
+
   return (
     <div className={styles.logListContainer}>
       {showControls && <LogListControls eventBus={eventBus} />}