From 9d018c859efab0e548ac716e7eba082503a02b7e Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 7 Feb 2023 12:50:38 +0100
Subject: [PATCH] chore: prefer useMountEffect over use memo

Signed-off-by: blam <ben@blam.sh>
---
 .../src/next/OngoingTask/TaskSteps/StepTime.tsx        |  5 +++--
 plugins/scaffolder/src/next/Router/Router.tsx          | 10 ++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx
index 2ec89f385a..653fe6e942 100644
--- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx
+++ b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/StepTime.tsx
@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
 import { Typography } from '@material-ui/core';
+import { useMountEffect } from '@react-hookz/web';
 
 export const StepTime = (props: {
   step: {
@@ -48,7 +49,7 @@ export const StepTime = (props: {
     setTime(humanizeDuration(formatted, { round: true }));
   }, [step.endedAt, step.startedAt]);
 
-  useMemo(() => calculate(), [calculate]);
+  useMountEffect(() => calculate());
 
   useInterval(() => !step.endedAt && calculate(), 1000);
 
diff --git a/plugins/scaffolder/src/next/Router/Router.tsx b/plugins/scaffolder/src/next/Router/Router.tsx
index 0ca9e452cd..049579e16c 100644
--- a/plugins/scaffolder/src/next/Router/Router.tsx
+++ b/plugins/scaffolder/src/next/Router/Router.tsx
@@ -76,7 +76,11 @@ export type NextRouterProps = {
  */
 export const Router = (props: PropsWithChildren<NextRouterProps>) => {
   const {
-    components: { TemplateCardComponent, TemplateOutputsComponent } = {},
+    components: {
+      TemplateCardComponent,
+      TemplateOutputsComponent,
+      TaskPageComponent = OngoingTask,
+    } = {},
   } = props;
   const outlet = useOutlet() || props.children;
   const customFieldExtensions =
@@ -121,7 +125,9 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
       <Route
         path={nextScaffolderTaskRouteRef.path}
         element={
-          <OngoingTask TemplateOutputsComponent={TemplateOutputsComponent} />
+          <TaskPageComponent
+            TemplateOutputsComponent={TemplateOutputsComponent}
+          />
         }
       />
       <Route path={nextActionsRouteRef.path} element={<ActionsPage />} />