Memoize workspace schedule button

BrunoQuaresma · BrunoQuaresma · commit d4e38f57e840 · 2022-07-01T17:39:25.000Z
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
+import React, { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { BuildsTable } from "../BuildsTable/BuildsTable"
@@ -14,6 +14,12 @@ import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceSch
 import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
 
+// The WorkspaceScheduleButton does some calculation to display the date labels
+// so to avoid doing that every seconds - because of the workspace pooling - we
+// are memoizing this component. More details:
+// https://github.com/coder/coder/pull/2775#discussion_r912080377
+const MemoizedWorkspaceScheduleButton = React.memo(WorkspaceScheduleButton)
+
 export interface WorkspaceProps {
   bannerProps: {
     isLoading?: boolean
@@ -60,7 +66,7 @@ export const Workspace: FC<WorkspaceProps> = ({
       <PageHeader
         actions={
           <Stack direction="row" spacing={1}>
-            <WorkspaceScheduleButton
+            <MemoizedWorkspaceScheduleButton
               workspace={workspace}
               onDeadlineMinus={scheduleProps.onDeadlineMinus}
               onDeadlinePlus={scheduleProps.onDeadlinePlus}
