Optimisation to tile rendering

src/components/map/MapTiles.js

@@ -9,7 +9,7 @@ import { getGroupItems } from "../../helpers/group";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
+function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
   const {
     selectedGroupIds,
     selectMode,
@@ -19,7 +19,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
 
   function renderTile(group) {
     if (group.type === "item") {
-      const map = maps.find((map) => map.id === group.id);
+      const map = mapsById[group.id];
       const isSelected = selectedGroupIds.includes(group.id);
       const canEdit =
         isSelected && selectMode === "single" && selectedGroupIds.length === 1;
@@ -44,7 +44,7 @@ function MapTiles({ maps, onMapEdit, onMapSelect, subgroup }) {
         <MapTileGroup
           key={group.id}
           group={group}
-          maps={items.map((item) => maps.find((map) => map.id === item.id))}
+          maps={items.map((item) => mapsById[item.id])}
           isSelected={isSelected}
           onSelect={onGroupSelect}
           onDoubleClick={() => canOpen && onGroupOpen(group.id)}

src/components/token/TokenTiles.js

@@ -10,7 +10,7 @@ import { getGroupItems } from "../../helpers/group";
 
 import { useGroup } from "../../contexts/GroupContext";
 
-function TokenTiles({ tokens, onTokenEdit, subgroup }) {
+function TokenTiles({ tokensById, onTokenEdit, subgroup }) {
   const {
     selectedGroupIds,
     selectMode,
@@ -20,7 +20,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
 
   function renderTile(group) {
     if (group.type === "item") {
-      const token = tokens.find((token) => token.id === group.id);
+      const token = tokensById[group.id];
       const isSelected = selectedGroupIds.includes(group.id);
       const canEdit =
         isSelected && selectMode === "single" && selectedGroupIds.length === 1;
@@ -48,9 +48,7 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
         <TokenTileGroup
           key={group.id}
           group={group}
-          tokens={items.map((item) =>
+          tokens={items.map((item) => tokensById[item.id])}
-            tokens.find((token) => token.id === item.id)
-          )}
           isSelected={isSelected}
           onSelect={onGroupSelect}
           onDoubleClick={() => canOpen && onGroupOpen(group.id)}

src/contexts/MapDataContext.js

@@ -221,6 +221,16 @@ export function MapDataProvider({ children }) {
     };
   }, [database, databaseStatus]);
 
+  const [mapsById, setMapsById] = useState({});
+  useEffect(() => {
+    setMapsById(
+      maps.reduce((obj, map) => {
+        obj[map.id] = map;
+        return obj;
+      }, {})
+    );
+  }, [maps]);
+
   const value = {
     maps,
     mapStates,
@@ -234,6 +244,7 @@ export function MapDataProvider({ children }) {
     mapsLoading,
     getMapState,
     updateMapGroups,
+    mapsById,
   };
   return (
     <MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>

src/contexts/TokenDataContext.js

@@ -169,10 +169,15 @@ export function TokenDataProvider({ children }) {
     };
   }, [database, databaseStatus]);
 
-  const tokensById = tokens.reduce((obj, token) => {
+  const [tokensById, setTokensById] = useState({});
-    obj[token.id] = token;
+  useEffect(() => {
-    return obj;
+    setTokensById(
-  }, {});
+      tokens.reduce((obj, token) => {
+        obj[token.id] = token;
+        return obj;
+      }, {})
+    );
+  }, [tokens]);
 
   const value = {
     tokens,

src/modals/SelectMapModal.js

@@ -52,6 +52,7 @@ function SelectMapModal({
     updateMapGroups,
     updateMap,
     updateMapState,
+    mapsById,
   } = useMapData();
   const { addAssets } = useAssets();
 
@@ -214,6 +215,7 @@ function SelectMapModal({
           handleWidth
           handleHeight
           onResize={handleModalResize}
+          refreshMode="debounce"
         >
           <GroupProvider
             groups={mapGroups}
@@ -240,7 +242,7 @@ function SelectMapModal({
                 >
                   <TilesContainer>
                     <MapTiles
-                      maps={maps}
+                      mapsById={mapsById}
                       onMapEdit={setEditingMapId}
                       onMapSelect={handleMapSelect}
                     />
@@ -254,7 +256,7 @@ function SelectMapModal({
                 >
                   <TilesOverlay modalSize={modalSize}>
                     <MapTiles
-                      maps={maps}
+                      mapsById={mapsById}
                       onMapEdit={setEditingMapId}
                       onMapSelect={handleMapSelect}
                       subgroup

src/modals/SelectTokensModal.js

@@ -215,6 +215,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
           handleWidth
           handleHeight
           onResize={handleModalResize}
+          refreshMode="debounce"
         >
           <GroupProvider
             groups={tokenGroups}
@@ -243,7 +244,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
                 >
                   <TilesContainer>
                     <TokenTiles
-                      tokens={tokens}
+                      tokensById={tokensById}
                       onTokenEdit={setEditingTokenId}
                     />
                   </TilesContainer>
@@ -256,7 +257,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
                 >
                   <TilesOverlay modalSize={modalSize}>
                     <TokenTiles
-                      tokens={tokens}
+                      tokensById={tokensById}
                       onTokenEdit={setEditingTokenId}
                       subgroup
                     />