Fixed selected filament re-rendering too much

client/src/pages/spools/create.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import {
@@ -85,10 +85,32 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
   //
   // Set up the filament selection options
   //
-  const { options: filamentOptions, getById, allExternalFilaments } = useGetFilamentSelectOptions();
+  const {
+    options: filamentOptions,
+    internalSelectOptions,
+    externalSelectOptions,
+    allExternalFilaments,
+  } = useGetFilamentSelectOptions();
 
   const selectedFilamentID = Form.useWatch("filament_id", form);
-  const selectedFilament = getById(selectedFilamentID);
+  const selectedFilament = useMemo(() => {
+    // id is a number of it's an internal filament, and a string of it's an external filament.
+    if (typeof selectedFilamentID === "number") {
+      return (
+        internalSelectOptions?.find((obj) => {
+          return obj.value === selectedFilamentID;
+        }) ?? null
+      );
+    } else if (typeof selectedFilamentID === "string") {
+      return (
+        externalSelectOptions?.find((obj) => {
+          return obj.value === selectedFilamentID;
+        }) ?? null
+      );
+    } else {
+      return null;
+    }
+  }, [selectedFilamentID, internalSelectOptions, externalSelectOptions]);
 
   //
   // Submit handler
@@ -96,8 +118,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
 
   const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
     const values = StringifiedExtras(await form.validateFields());
-    const selectOption = getById(values.filament_id);
-    if (selectOption?.is_internal === false) {
+    if (selectedFilament?.is_internal === false) {
       // Filament ID being a string indicates its an external filament.
       // If so, we should first create the internal filament version, then create the spool(s)
       const externalFilament = allExternalFilaments?.find((f) => f.id === values.filament_id);

client/src/pages/spools/edit.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Alert, Typography } from "antd";
@@ -46,10 +46,6 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
 
   const initialWeightValue = Form.useWatch("initial_weight", form);
   const spoolWeightValue = Form.useWatch("spool_weight", form);
-  // Get filament selection options
-  const { queryResult } = useSelect<IFilament>({
-    resource: "filament",
-  });
 
   // Add the filament_id field to the form
   if (formProps.initialValues) {
@@ -62,10 +58,32 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   //
   // Set up the filament selection options
   //
-  const { options: filamentOptions, getById, allExternalFilaments } = useGetFilamentSelectOptions();
+  const {
+    options: filamentOptions,
+    internalSelectOptions,
+    externalSelectOptions,
+    allExternalFilaments,
+  } = useGetFilamentSelectOptions();
 
   const selectedFilamentID = Form.useWatch("filament_id", form);
-  const selectedFilament = getById(selectedFilamentID);
+  const selectedFilament = useMemo(() => {
+    // id is a number of it's an internal filament, and a string of it's an external filament.
+    if (typeof selectedFilamentID === "number") {
+      return (
+        internalSelectOptions?.find((obj) => {
+          return obj.value === selectedFilamentID;
+        }) ?? null
+      );
+    } else if (typeof selectedFilamentID === "string") {
+      return (
+        externalSelectOptions?.find((obj) => {
+          return obj.value === selectedFilamentID;
+        }) ?? null
+      );
+    } else {
+      return null;
+    }
+  }, [selectedFilamentID, internalSelectOptions, externalSelectOptions]);
 
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
@@ -73,8 +91,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     if (allValues !== undefined && allValues !== null) {
       // Lot of stupidity here to make types work
       const values = StringifiedExtras<ISpoolRequest>(allValues);
-      const selectOption = getById(values.filament_id);
-      if (selectOption?.is_internal === false) {
+      if (selectedFilament?.is_internal === false) {
         // Filament ID being a string indicates its an external filament.
         // If so, we should first create the internal filament version, then edit the spool
         const externalFilament = allExternalFilaments?.find((f) => f.id === values.filament_id);
@@ -103,6 +120,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   React.useEffect(() => {
     const newFilamentWeight = selectedFilament?.weight || 0;
     const newSpoolWeight = selectedFilament?.spool_weight || 0;
+    console.log("selectedFilament", selectedFilament, newFilamentWeight, newSpoolWeight);
     if (newFilamentWeight > 0) {
       form.setFieldValue("initial_weight", newFilamentWeight);
     }

client/src/pages/spools/functions.tsx

@@ -4,6 +4,7 @@ import { getAPIURL } from "../../utils/url";
 import { ISpool } from "./model";
 import { IFilament } from "../filaments/model";
 import { useGetExternalDBFilaments } from "../../utils/queryExternalDB";
+import { useMemo } from "react";
 
 export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   const init: RequestInit = {
@@ -62,36 +63,42 @@ export function useGetFilamentSelectOptions() {
   const externalFilaments = useGetExternalDBFilaments();
 
   // Format and sort internal filament options
-  const filamentSelectInternal: SelectOption[] =
-    internalFilaments.data?.data.map((item) => {
-      return {
-        label: formatFilamentLabel(
-          item.name ?? `ID ${item.id}`,
-          item.diameter,
-          item.vendor?.name,
-          item.material,
-          item.weight
-        ),
-        value: item.id,
-        weight: item.weight,
-        spool_weight: item.spool_weight,
-        is_internal: true,
-      };
-    }) ?? [];
-  filamentSelectInternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  const filamentSelectInternal: SelectOption[] = useMemo(() => {
+    const data =
+      internalFilaments.data?.data.map((item) => {
+        return {
+          label: formatFilamentLabel(
+            item.name ?? `ID ${item.id}`,
+            item.diameter,
+            item.vendor?.name,
+            item.material,
+            item.weight
+          ),
+          value: item.id,
+          weight: item.weight,
+          spool_weight: item.spool_weight,
+          is_internal: true,
+        };
+      }) ?? [];
+    data.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+    return data;
+  }, [internalFilaments.data?.data]);
 
   // Format and sort external filament options
-  const filamentSelectExternal: SelectOption[] =
-    externalFilaments.data?.map((item) => {
-      return {
-        label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight),
-        value: item.id,
-        weight: item.weight,
-        spool_weight: item.spool_weight || undefined,
-        is_internal: false,
-      };
-    }) ?? [];
-  filamentSelectExternal.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  const filamentSelectExternal: SelectOption[] = useMemo(() => {
+    const data =
+      externalFilaments.data?.map((item) => {
+        return {
+          label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight),
+          value: item.id,
+          weight: item.weight,
+          spool_weight: item.spool_weight || undefined,
+          is_internal: false,
+        };
+      }) ?? [];
+    data.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+    return data;
+  }, [externalFilaments.data]);
 
   return {
     options: [
@@ -104,24 +111,8 @@ export function useGetFilamentSelectOptions() {
         options: filamentSelectExternal,
       },
     ],
-    getById: (id: number | string | null) => {
-      // id is a number of it's an internal filament, and a string of it's an external filament.
-      if (typeof id === "number") {
-        return (
-          filamentSelectInternal?.find((obj) => {
-            return obj.value === id;
-          }) ?? null
-        );
-      } else if (typeof id === "string") {
-        return (
-          filamentSelectExternal?.find((obj) => {
-            return obj.value === id;
-          }) ?? null
-        );
-      } else {
-        return null;
-      }
-    },
+    internalSelectOptions: filamentSelectInternal,
+    externalSelectOptions: filamentSelectExternal,
     allExternalFilaments: externalFilaments.data,
   };
 }