From 07d6c6aa32509a676f9d5b5e3abea1e382374f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Mur=C3=A9?= <batolettre@gmail.com>
Date: Fri, 26 Jun 2020 11:14:31 +0200
Subject: [PATCH] webui: render component's children as a function to avoid
 uncecessary rendering

Co-authored-by: Quentin Gliech <quentingliech@gmail.com>
---
 webui/src/layout/IfLoggedIn.tsx | 4 ++--
 webui/src/pages/bug/Bug.tsx     | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/webui/src/layout/IfLoggedIn.tsx b/webui/src/layout/IfLoggedIn.tsx
index 8b9058dcc6b32c575082d51a86207a0e362dc9ec..9f4a75767051f30dbf44aca6ea0e62615a048bc5 100644
--- a/webui/src/layout/IfLoggedIn.tsx
+++ b/webui/src/layout/IfLoggedIn.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
-type Props = { children: React.ReactNode };
+type Props = { children: () => React.ReactNode };
 const IfLoggedIn = ({ children }: Props) => {
   const { loading, error, data } = useCurrentIdentityQuery();
 
   if (error || loading || !data?.repository?.userIdentity) return null;
 
-  return <>{children}</>;
+  return <>{children()}</>;
 };
 
 export default IfLoggedIn;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 7057f5a188382ae3c097df7845a5e4a7a7076f8d..34a3aa26835b94542fa0913a2cf02bdb1fc359eb 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -90,9 +90,11 @@ function Bug({ bug }: Props) {
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
-            <div className={classes.commentForm}>
-              <CommentForm bugId={bug.id} />
-            </div>
+            {() => (
+              <div className={classes.commentForm}>
+                <CommentForm bugId={bug.id} />
+              </div>
+            )}
           </IfLoggedIn>
         </div>
         <div className={classes.sidebar}>