Prevent useTitle from rerendering

This commit is contained in:
Lim Chee Aun 2023-04-14 15:28:52 +08:00
parent 650af38a28
commit a60ad33b47

View file

@ -1,14 +1,14 @@
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;
function setTitle() {
const { currentLocation } = states;
const hasPaths = Array.isArray(path);
let paths = hasPaths ? path : [];
// Workaround for matchPath not working for optional path segments
@ -23,9 +23,14 @@ export default function useTitle(title, path) {
} else if (path) {
matched = matchPath(path, currentLocation);
}
console.debug({ paths, matched, currentLocation });
useEffect(() => {
if (!matched) return;
console.log('setTitle', { title, path, currentLocation, paths, matched });
if (matched) {
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
}, [title, matched]);
}
}
useEffect(() => {
setTitle();
return subscribeKey(states, 'currentLocation', setTitle);
}, [title, path]);
}