webui: render component's children as a function to avoid uncecessary rendering

Michael Muré and Quentin Gliech created 5 years ago

Co-authored-by: Quentin Gliech <[e-mail]>

Change summary

webui/src/layout/IfLoggedIn.tsx | 4 ++--
webui/src/pages/bug/Bug.tsx     | 8 +++++---
2 files changed, 7 insertions(+), 5 deletions(-)

Detailed changes

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;

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}>