chore: prefer useMountEffect over use memo

Signed-off-by: blam <ben@blam.sh>

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);
 

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