fix: Memoize route component to avoid double render for incoming async routes (#72)

* fix: Try to fix unnecessary double-render

* test: Add test case

Co-authored-by: Steven Beshensky <[email protected]>

---------

Co-authored-by: Steven Beshensky <[email protected]>

Author: rschristian

src/router.js

@@ -145,9 +145,14 @@ export function Router(props) {
 
 	/** @type {VNode<any> | undefined} */
 	let incoming = pathRoute || defaultRoute;
+
+	const isHydratingSuspense = cur.current && cur.current.__u & MODE_HYDRATE && cur.current.__u & MODE_SUSPENDED;
+	const isHydratingBool = cur.current && cur.current.__h;
 	const routeChanged = useMemo(() => {
 		prev.current = cur.current;
 
+		cur.current = /** @type {VNode<any>} */ (h(RouteContext.Provider, { value: matchProps }, incoming));
+
 		// Only mark as an update if the route component changed.
 		const outgoing = prev.current && prev.current.props.children;
 		if (!outgoing || !incoming || incoming.type !== outgoing.type || incoming.props.component !== outgoing.props.component) {
@@ -157,12 +162,8 @@ export function Router(props) {
 			return true;
 		}
 		return false;
-	}, [url]);
+	}, [url, JSON.stringify(matchProps)]);
 
-	const isHydratingSuspense = cur.current && cur.current.__u & MODE_HYDRATE && cur.current.__u & MODE_SUSPENDED;
-	const isHydratingBool = cur.current && cur.current.__h;
-	// @ts-ignore
-	cur.current = /** @type {VNode<any>} */ (h(RouteContext.Provider, { value: matchProps }, incoming));
 	if (isHydratingSuspense) {
 		cur.current.__u |= MODE_HYDRATE;
 		cur.current.__u |= MODE_SUSPENDED;

test/router.test.js

@@ -251,6 +251,7 @@ describe('Router', () => {
 		await sleep(10);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>B</h1><p>hello</p>');
+		expect(B).to.have.been.calledOnce;
 		expect(B).to.have.been.calledWith({ path: '/b', query: {}, params: {}, rest: '' });
 
 		B.resetHistory();
@@ -277,6 +278,7 @@ describe('Router', () => {
 		await sleep(10);
 
 		expect(scratch).to.have.property('innerHTML', '<h1>C</h1>');
+		expect(C).to.have.been.calledOnce;
 		expect(C).to.have.been.calledWith({ path: '/c', query: {}, params: {}, rest: '' });
 
 		// "instant" routing to already-loaded routes