memoize selected region

linode · Mar 27, 2024 · 8a453e6 · 8a453e6
1 parent 7b86f37
commit 8a453e6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/Addons.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/Addons.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 
 import { Divider } from 'src/components/Divider';
@@ -18,7 +18,10 @@ export const Addons = () => {
 
   const { data: regions } = useRegionsQuery();
 
-  const selectedRegion = regions?.find((r) => r.id === regionId);
+  const selectedRegion = useMemo(
+    () => regions?.find((r) => r.id === regionId),
+    [regions, regionId]
+  );
 
   const isEdgeRegionSelected = selectedRegion?.site_type === 'edge';
 

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/Backups.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/Backups.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 
 import { Checkbox } from 'src/components/Checkbox';
@@ -38,7 +38,10 @@ export const Backups = () => {
     type,
   });
 
-  const selectedRegion = regions?.find((r) => r.id === regionId);
+  const selectedRegion = useMemo(
+    () => regions?.find((r) => r.id === regionId),
+    [regions, regionId]
+  );
 
   const isAccountBackupsEnabled = accountSettings?.backups_enabled ?? false;
 

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/PrivateIP.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Addons/PrivateIP.tsx
@@ -1,5 +1,4 @@
-import type { CreateLinodeRequest } from '@linode/api-v4';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 
 import { Checkbox } from 'src/components/Checkbox';
@@ -9,6 +8,8 @@ import { Typography } from 'src/components/Typography';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 
+import type { CreateLinodeRequest } from '@linode/api-v4';
+
 export const PrivateIP = () => {
   const { field } = useController<CreateLinodeRequest, 'private_ip'>({
     name: 'private_ip',
@@ -22,7 +23,10 @@ export const PrivateIP = () => {
 
   const regionId = useWatch<CreateLinodeRequest, 'region'>({ name: 'region' });
 
-  const selectedRegion = regions?.find((r) => r.id === regionId);
+  const selectedRegion = useMemo(
+    () => regions?.find((r) => r.id === regionId),
+    [regions, regionId]
+  );
 
   const isEdgeRegionSelected = selectedRegion?.site_type === 'edge';