memoize Item, clicks on mobile are fast now!

This was a surprisingly big win! Item is heavier than it looks, because it has like 6 Chakra components, which aren't expensive but aren't _cheap_ in a re-rendered list that needs to be fast, you know?

And it's even more important on search, where there's a lot of items on the page. (we should virtualize it too but that's a thing for another day)

src/app/WardrobePage/Item.js

@@ -29,12 +29,15 @@ const LoadableItemSupportDrawer = loadable(() =>
  * In fact, this component can't trigger wear or unwear events! When you click
  * it in the app, you're actually clicking a <label> that wraps the radio or
  * checkbox. We _do_ control the Remove button in here, though!
+ *
+ * NOTE: This component is memoized with React.memo. It's surpisingly expensive
+ *       to re-render, because Chakra components are a lil bit expensive from
+ *       their internal complexity, and we have a lot of them here. And it can
+ *       add up when there's a lot of Items in the list. This contributes to
+ *       wearing/unwearing items being noticeably slower on lower-power
+ *       devices.
  */
-export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
+function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) {
-  const { wornItemIds, allItemIds } = outfitState;
-  const isWorn = wornItemIds.includes(item.id);
-  const isInOutfit = allItemIds.includes(item.id);
-
   const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false);
 
   return (
@@ -80,7 +83,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
       <SupportOnly>
         <LoadableItemSupportDrawer
           item={item}
-          outfitState={outfitState}
+          outfitState="STOPSHIP"
           isOpen={supportDrawerIsOpen}
           onClose={() => setSupportDrawerIsOpen(false)}
         />
@@ -290,3 +293,5 @@ export function ItemListSkeleton({ count }) {
  */
 const containerHasFocus =
   ".item-container:hover &, input:focus + .item-container &";
+
+export default React.memo(Item);

src/app/WardrobePage/ItemsPanel.js

@@ -14,7 +14,7 @@ import { EditIcon } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { Delay, Heading1, Heading2 } from "../util";
-import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
+import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 
 /**
  * ItemsPanel shows the items in the current outfit, and lets the user toggle
@@ -120,7 +120,8 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
                   <Item
                     item={item}
                     itemNameId={itemNameId}
-                    outfitState={outfitState}
+                    isWorn={outfitState.wornItemIds.includes(item.id)}
+                    isInOutfit={outfitState.allItemIds.includes(item.id)}
                     dispatchToOutfit={dispatchToOutfit}
                   />
                 </label>

src/app/WardrobePage/SearchPanel.js

@@ -4,7 +4,7 @@ import { Box, Text, VisuallyHidden } from "@chakra-ui/core";
 import { useQuery } from "@apollo/client";
 
 import { Delay, Heading1, useDebounce } from "../util";
-import { Item, ItemListContainer, ItemListSkeleton } from "./Item";
+import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import { itemAppearanceFragment } from "../components/useOutfitAppearance";
 
 /**
@@ -173,7 +173,8 @@ function SearchResults({
             />
             <Item
               item={item}
-              outfitState={outfitState}
+              isWorn={outfitState.wornItemIds.includes(item.id)}
+              isInOutfit={outfitState.allItemIds.includes(item.id)}
               dispatchToOutfit={dispatchToOutfit}
             />
           </label>

src/app/WardrobePage/index.js

@@ -4,7 +4,7 @@ import loadable from "@loadable/component";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
 import OutfitPreview from "../components/OutfitPreview";
-import useOutfitState from "./useOutfitState.js";
+import useOutfitState, { OutfitStateContext } from "./useOutfitState.js";
 import { usePageTitle } from "../util";
 
 const OutfitControls = loadable(() =>
@@ -44,6 +44,11 @@ function WardrobePage() {
   }, [error, toast]);
 
   return (
+    // NOTE: Most components pass around outfitState directly, to make the data
+    //       relationships more explicit... but there are some deep components
+    //       that need it, where it's more useful and more performant to access
+    //       via context.
+    <OutfitStateContext.Provider value={outfitState}>
       <Box
         position="absolute"
         top="0"
@@ -96,6 +101,7 @@ function WardrobePage() {
           </Box>
         </Grid>
       </Box>
+    </OutfitStateContext.Provider>
   );
 }
 

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -28,6 +28,7 @@ import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 import ItemLayerSupportModal from "./ItemLayerSupportModal";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import useOutfitAppearance from "../../components/useOutfitAppearance";
+import { OutfitStateContext } from "../useOutfitState";
 import useSupportSecret from "./useSupportSecret";
 
 /**
@@ -36,7 +37,7 @@ import useSupportSecret from "./useSupportSecret";
  * This component controls the drawer element. The actual content is imported
  * from another lazy-loaded component!
  */
-function ItemSupportDrawer({ item, outfitState, isOpen, onClose }) {
+function ItemSupportDrawer({ item, isOpen, onClose }) {
   const placement = useBreakpointValue({
     base: "bottom",
     lg: "right",
@@ -75,10 +76,7 @@ function ItemSupportDrawer({ item, outfitState, isOpen, onClose }) {
             <Box paddingBottom="5">
               <Stack spacing="8">
                 <ItemSupportSpecialColorFields item={item} />
-                <ItemSupportAppearanceFields
+                <ItemSupportAppearanceFields item={item} />
-                  item={item}
-                  outfitState={outfitState}
-                />
               </Stack>
             </Box>
           </DrawerBody>
@@ -231,7 +229,15 @@ function ItemSupportSpecialColorFields({ item }) {
   );
 }
 
-function ItemSupportAppearanceFields({ item, outfitState }) {
+/**
+ * NOTE: This component takes `outfitState` from context, rather than as a prop
+ *       from its parent, for performance reasons. We want `Item` to memoize
+ *       and generally skip re-rendering on `outfitState` changes, and to make
+ *       sure the context isn't accessed when the drawer is closed. So we use
+ *       it here, only when the drawer is open!
+ */
+function ItemSupportAppearanceFields({ item }) {
+  const outfitState = React.useContext(OutfitStateContext);
   const { speciesId, colorId, pose } = outfitState;
   const { error, visibleLayers } = useOutfitAppearance({
     speciesId,

src/app/WardrobePage/useOutfitState.js

@@ -7,6 +7,8 @@ import { itemAppearanceFragment } from "../components/useOutfitAppearance";
 
 enableMapSet();
 
+export const OutfitStateContext = React.createContext(null);
+
 function useOutfitState() {
   const apolloClient = useApolloClient();
   const initialState = parseOutfitUrl();