memos/web/src/hooks/useNavigateTo.ts
Steven 2ab476ef2e fix(web): memoize useNavigateTo to prevent infinite view transition loop
Wrapping the returned function in useCallback prevents a new reference
on every render, which was causing an infinite startViewTransition loop
on the initial signup page (fresh install with no admin).

Fixes #5626
2026-02-22 13:16:59 +08:00

24 lines
678 B
TypeScript

import { useCallback } from "react";
import { NavigateOptions, useNavigate } from "react-router-dom";
const useNavigateTo = () => {
const navigateTo = useNavigate();
const navigateToWithViewTransition = useCallback(
(to: string, options?: NavigateOptions) => {
const doc = window.document as unknown as Document & { startViewTransition?: (callback: () => void) => void };
if (!doc.startViewTransition) {
navigateTo(to, options);
} else {
document.startViewTransition(() => {
navigateTo(to, options);
});
}
},
[navigateTo],
);
return navigateToWithViewTransition;
};
export default useNavigateTo;