(preact-iso) - avoid calling onLoadEnd on every render

.changeset/great-drinks-obey.md

@@ -0,0 +1,5 @@
+---
+"preact-iso": patch
+---
+
+Avoid calling onLoadEnd on every render

.changeset/tall-beers-lay.md

@@ -0,0 +1,5 @@
+---
+'preact-iso': minor
+---
+
+Add `onRouteChange` prop to the Router to observe synchronous route changes

packages/preact-iso/router.d.ts

@@ -3,6 +3,7 @@ import { AnyComponent, FunctionComponent, VNode } from 'preact';
 export const LocationProvider: FunctionComponent;
 
 export function Router(props: {
+	onRouteChange?: (url: string) => void;
 	onLoadEnd?: (url: string) => void;
 	onLoadStart?: (url: string) => void;
 	children?: VNode[];

packages/preact-iso/router.js

@@ -87,13 +87,14 @@ export function LocationProvider(props) {
 }
 
 const RESOLVED = Promise.resolve();
-
 export function Router(props) {
-	const [, update] = useReducer(c => c + 1, 0);
+	const [c, update] = useReducer(c => c + 1, 0);
 
 	const { url, query, wasPush, path } = useLocation();
 	const { rest = path, params = {} } = useContext(RouteContext);
 
+	const isLoading = useRef(false);
+	const prevRoute = useRef(path);
 	// Monotonic counter used to check if an un-suspending route is still the current route:
 	const count = useRef(0);
 	// The current route:
@@ -140,6 +141,7 @@ export function Router(props) {
 
 		// Fire an event saying we're waiting for the route:
 		if (props.onLoadStart) props.onLoadStart(url);
+		isLoading.current = true;
 
 		// Re-render on unsuspend:
 		let c = count.current;
@@ -175,9 +177,15 @@ export function Router(props) {
 		hasEverCommitted.current = true;
 
 		// The route is loaded and rendered.
-		if (wasPush) scrollTo(0, 0);
-		if (props.onLoadEnd) props.onLoadEnd(url);
-	});
+		if (prevRoute.current !== path) {
+			if (wasPush) scrollTo(0, 0);
+			if (props.onLoadEnd && isLoading.current) props.onLoadEnd(url);
+			if (props.onRouteChange) props.onRouteChange(url);
+
+			isLoading.current = false;
+			prevRoute.current = path;
+		}
+	}, [path, wasPush, c]);
 
 	// Note: curChildren MUST render first in order to set didSuspend & prev.
 	return [h(RenderRef, { r: cur }), h(RenderRef, { r: prev })];

packages/preact-iso/test/router.test.js

@@ -28,11 +28,16 @@ describe('Router', () => {
 		const Profiles = jest.fn(() => html`<h1>Profiles</h1>`);
 		const Profile = jest.fn(({ params }) => html`<h1>Profile: ${params.id}</h1>`);
 		const Fallback = jest.fn(() => html`<h1>Fallback</h1>`);
+		const stack = [];
 		let loc;
 		render(
 			html`
 				<${LocationProvider}>
-					<${Router}>
+					<${Router}
+						onRouteChange=${url => {
+							stack.push(url);
+						}}
+					>
 						<${Home} path="/" />
 						<${Profiles} path="/profiles" />
 						<${Profile} path="/profiles/:id" />
@@ -111,6 +116,7 @@ describe('Router', () => {
 			path: '/other',
 			query: { a: 'b', c: 'd' }
 		});
+		expect(stack).toEqual(['/profiles', '/profiles/bob', '/other?a=b&c=d']);
 	});
 
 	it('should wait for asynchronous routes', async () => {