Time to save all to states

Memory usage might go up but need this for reactivity

src/pages/account-statuses.jsx

@@ -7,6 +7,7 @@ import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import emojifyText from '../utils/emojify-text';
 import states from '../utils/states';
+import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -48,6 +49,10 @@ function AccountStatuses() {
     const { value, done } = await accountStatusesIterator.current.next();
     if (value?.length) {
       results.push(...value);
+
+      value.forEach((item) => {
+        saveStatus(item, instance);
+      });
     }
     return {
       value: results,
@@ -118,6 +123,7 @@ function AccountStatuses() {
       emptyText="Nothing to see here yet."
       errorText="Unable to load statuses"
       fetchItems={fetchAccountStatuses}
+      useItemID
       boostsCarousel={snapStates.settings.boostsCarousel}
       timelineStart={TimelineStart}
     />

src/pages/hashtag.jsx

@@ -13,6 +13,7 @@ import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
+import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -52,6 +53,10 @@ function Hashtags(props) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
+
+      value.forEach((item) => {
+        saveStatus(item, instance);
+      });
     }
     return results;
   }
@@ -110,6 +115,7 @@ function Hashtags(props) {
       errorText="Unable to load posts with this tag"
       fetchItems={fetchHashtags}
       checkForUpdates={checkForUpdates}
+      useItemID
       headerEnd={
         <Menu
           portal={{

src/pages/list.jsx

@@ -5,6 +5,7 @@ import Icon from '../components/icon';
 import Link from '../components/link';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -27,6 +28,10 @@ function List(props) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
+
+      value.forEach((item) => {
+        saveStatus(item, instance);
+      });
     }
     return results;
   }
@@ -69,6 +74,7 @@ function List(props) {
       instance={instance}
       fetchItems={fetchList}
       checkForUpdates={checkForUpdates}
+      useItemID
       boostsCarousel
       headerStart={
         <Link to="/l" class="button plain">

src/pages/public.jsx

@@ -7,6 +7,7 @@ import Icon from '../components/icon';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import states from '../utils/states';
+import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -37,6 +38,10 @@ function Public({ local, ...props }) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
+
+      value.forEach((item) => {
+        saveStatus(item, instance);
+      });
     }
     return results;
   }
@@ -76,6 +81,7 @@ function Public({ local, ...props }) {
       errorText="Unable to load posts"
       fetchItems={fetchPublic}
       checkForUpdates={checkForUpdates}
+      useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
       headerEnd={