From b19f46378b0477f7bb218ede9ed147fcf46aa5c3 Mon Sep 17 00:00:00 2001
From: Vova Kulikov <vova@sourcegraph.com>
Date: Mon, 13 Feb 2023 15:39:35 -0300
Subject: [PATCH] Fix tabs component lazy rendering

---
 .../src/components/Tabs/useShouldPanelRender.ts   | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/client/wildcard/src/components/Tabs/useShouldPanelRender.ts b/client/wildcard/src/components/Tabs/useShouldPanelRender.ts
index e9a30034eb2b..83b55bbecf86 100644
--- a/client/wildcard/src/components/Tabs/useShouldPanelRender.ts
+++ b/client/wildcard/src/components/Tabs/useShouldPanelRender.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useState } from 'react'
 
 import { useTabsContext as useReachTabsContext } from '@reach/tabs'
 
@@ -11,17 +11,10 @@ export function useShouldPanelRender(children: React.ReactNode): boolean {
         settings: { lazy, behavior },
     } = useTabsState()
     const [wasRendered, setWasRendered] = useState(selectedIndex === index)
-    const previousChildren = useRef(children)
 
-    useEffect(() => {
-        if (lazy) {
-            // If children change, we should invalidate "cache" and unrender
-            if (children !== previousChildren.current) {
-                setWasRendered(index === selectedIndex)
-                previousChildren.current = children
-            } else if (index === selectedIndex) {
-                setWasRendered(true)
-            }
+    useLayoutEffect(() => {
+        if (lazy && index === selectedIndex) {
+            setWasRendered(true)
         }
     }, [lazy, children, index, selectedIndex])