Fix performance issues on navigation changes from post feeds (#649)

src/App.tsx

@@ -30,6 +30,7 @@ import { getDeviceMode } from "./features/settings/settingsSlice";
 import { SafeArea, SafeAreaInsets } from "capacitor-plugin-safe-area";
 import { StatusBar } from "@capacitor/status-bar";
 import { Keyboard } from "@capacitor/keyboard";
+import { TabContextProvider } from "./TabContext";
 
 setupIonicReact({
   rippleEffect: false,
@@ -74,11 +75,13 @@ export default function App() {
             <BeforeInstallPromptProvider>
               <UpdateContextProvider>
                 <Router>
-                  <IonApp>
-                    <Auth>
-                      <TabbedRoutes />
-                    </Auth>
-                  </IonApp>
+                  <TabContextProvider>
+                    <IonApp>
+                      <Auth>
+                        <TabbedRoutes />
+                      </Auth>
+                    </IonApp>
+                  </TabContextProvider>
                 </Router>
               </UpdateContextProvider>
             </BeforeInstallPromptProvider>

src/TabContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useMemo } from "react";
+import { useLocation } from "react-router";
+
+interface ITabContext {
+  tab: string;
+}
+
+export const TabContext = createContext<ITabContext>({
+  tab: "",
+});
+
+/**
+ * The reason for this, instead of useLocation() in components directly to get tab name,
+ * is that it does not trigger a rerender on navigation changes.
+ */
+export function TabContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const location = useLocation();
+
+  const tab = location.pathname.split("/")[1];
+
+  const memoized = useMemo(
+    () => (
+      <TabContextProviderInternals tab={tab}>
+        {children}
+      </TabContextProviderInternals>
+    ),
+    [tab, children]
+  );
+
+  return memoized;
+}
+
+function TabContextProviderInternals({
+  tab,
+  children,
+}: {
+  tab: string;
+  children: React.ReactNode;
+}) {
+  return <TabContext.Provider value={{ tab }}>{children}</TabContext.Provider>;
+}