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