Improvements in performance

components/home/EntitySpan/EntitySpan.tsx

@@ -1,33 +1,36 @@
-import {FC, HTMLProps, useMemo} from "react"
+import {FC, HTMLProps, memo, useMemo} from "react"
 import {Entity} from "../../../src/types"
-import {useDetails} from "../../../src/hooks/useDetails"
+import {useFactories} from "../../../src/hooks/useFactories"
 import styles from './EntitySpan.module.css'
 import {RecipeSpan} from "../Recipe/Recipe";
 import {LeftClickIcon} from "../LeftClickIcon/LeftClickIcon";
+import cx from 'classnames';
 
 interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
   value: Entity|string
+  state?: 'base'|'produced'|'unknown'
   leftClickText?: string
   rightClickText?: string
+  simpleStyle?: boolean
 }
 
-export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...rest}) => {
-  const details = useDetails()
+const EntitySpanUnmemo: FC<Props> = ({value, state, leftClickText, rightClickText, simpleStyle, ...rest}) => {
+  const {findFactory} = useFactories()
   const entity = useMemo<Entity>(() => {
     return typeof value === "object"
       ? value
-      : details.find(detail => detail.href === value) ?? {
+      : findFactory(value) ?? {
         href: value,
         name: value,
         image: value,
         recipe: undefined
       }
-  }, [details, value])
+  }, [findFactory, value])
 
-  return <span className={styles.span} {...rest}>
+  return <span className={simpleStyle ? styles.spanSimple : styles.span} {...rest}>
     {/* eslint-disable-next-line @next/next/no-img-element */}
     <img className={styles.img} src={`https://wiki.factorio.com${entity.image}`} alt={entity.name}/>
-    {entity.name}
+    <span className={styles[state ?? 'unknown']}>{entity.name}</span>
     <div className={styles.tooltip}>
       {entity.recipe && (
         <>
@@ -45,3 +48,5 @@ export const EntitySpan: FC<Props> = ({value, leftClickText, rightClickText, ...
     </div>
   </span>
 }
+
+export const EntitySpan = memo(EntitySpanUnmemo)