feat: optimize info lines

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -1,7 +1,7 @@
 import { createDefaultSkills } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
 import { clamp } from 'lodash-es';
-import { useMemo, type ComponentProps, type ReactNode } from 'react';
+import { memo, useMemo, type ComponentProps, type ReactNode } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../../core/awaitables/provisionDefinitions';
@@ -48,13 +48,8 @@ const [
   awaitableSkillDefinitions,
 ]);
 
-export function InfoWithDelta({
+export const InfoWithDelta = memo<InfoWithDeltaProps>(
-  stats,
+  ({ stats, indent, noRanking, deltaType, ...props }) => {
-  indent,
-  noRanking,
-  deltaType,
-  ...props
-}: InfoWithDeltaProps) {
     const { strings } = useLocale();
     const relativeAgainst = TankopediaEphemeral.use(
       (state) => state.relativeAgainst,
@@ -94,7 +89,9 @@ export function InfoWithDelta({
             provisionDefinitions,
           );
 
-        if (member.gun.gun_type!.value.base.shells[shellIndex] === undefined) {
+          if (
+            member.gun.gun_type!.value.base.shells[shellIndex] === undefined
+          ) {
             return undefined;
           }
 
@@ -186,10 +183,16 @@ export function InfoWithDelta({
             />
 
             <Text color="gray" size="1">
-            {clamp(betterTanks.length + 1, 1, others.length)} / {others.length}
+              {clamp(betterTanks.length + 1, 1, others.length)} /{' '}
+              {others.length}
             </Text>
           </Flex>
         )}
       </Flex>
     );
-}
+  },
+
+  (a, b) =>
+    (typeof a.value === 'function' ? a.value(a.stats) : a.stats[a.value]) ===
+    (typeof b.value === 'function' ? b.value(b.stats) : b.stats[b.value]),
+);