From a60ad33b472a266502d619da06e88d18599e8e2c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 14 Apr 2023 15:28:52 +0800
Subject: [PATCH] Prevent useTitle from rerendering

---
 src/utils/useTitle.js | 45 ++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/utils/useTitle.js b/src/utils/useTitle.js
index 6257b004..17f32fb4 100644
--- a/src/utils/useTitle.js
+++ b/src/utils/useTitle.js
@@ -1,31 +1,36 @@
 import { useEffect } from 'preact/hooks';
 import { matchPath } from 'react-router-dom';
-import { useSnapshot } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 
 import states from './states';
 
 const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
 
 export default function useTitle(title, path) {
-  const snapStates = useSnapshot(states);
-  const { currentLocation } = snapStates;
-  const hasPaths = Array.isArray(path);
-  let paths = hasPaths ? path : [];
-  // Workaround for matchPath not working for optional path segments
-  // https://github.com/remix-run/react-router/discussions/9862
-  if (!hasPaths && /:?\w+\?/.test(path)) {
-    paths.push(path.replace(/(:\w+)\?/g, '$1'));
-    paths.push(path.replace(/\/?:\w+\?/g, ''));
+  function setTitle() {
+    const { currentLocation } = states;
+    const hasPaths = Array.isArray(path);
+    let paths = hasPaths ? path : [];
+    // Workaround for matchPath not working for optional path segments
+    // https://github.com/remix-run/react-router/discussions/9862
+    if (!hasPaths && /:?\w+\?/.test(path)) {
+      paths.push(path.replace(/(:\w+)\?/g, '$1'));
+      paths.push(path.replace(/\/?:\w+\?/g, ''));
+    }
+    let matched = false;
+    if (paths.length) {
+      matched = paths.some((p) => matchPath(p, currentLocation));
+    } else if (path) {
+      matched = matchPath(path, currentLocation);
+    }
+    console.log('setTitle', { title, path, currentLocation, paths, matched });
+    if (matched) {
+      document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
+    }
   }
-  let matched = false;
-  if (paths.length) {
-    matched = paths.some((p) => matchPath(p, currentLocation));
-  } else if (path) {
-    matched = matchPath(path, currentLocation);
-  }
-  console.debug({ paths, matched, currentLocation });
+
   useEffect(() => {
-    if (!matched) return;
-    document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
-  }, [title, matched]);
+    setTitle();
+    return subscribeKey(states, 'currentLocation', setTitle);
+  }, [title, path]);
 }