Add isInitial property to the location object, use it instead of …

…`isFirstRender` in the `NavigatorScreen`

packages/components/src/navigator/navigator-provider/component.tsx

@@ -44,6 +44,7 @@ function NavigatorProvider(
 		{
 			path: initialPath,
 			isBack: false,
+			isInitial: true,
 		},
 	] );
 
@@ -59,11 +60,13 @@ function NavigatorProvider(
 				...locationHistory.slice( 0, -1 ),
 				{
 					...locationHistory[ locationHistory.length - 1 ],
+					isBack: false,
 					focusRestorationSelector,
 				},
 				{
 					path,
 					isBack: false,
+					isInitial: false,
 					...restOptions,
 				},
 			] );

packages/components/src/navigator/navigator-screen/component.tsx

@@ -11,13 +11,7 @@ import { css } from '@emotion/react';
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import {
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-} from '@wordpress/element';
+import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
 import { useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
@@ -73,14 +67,14 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	);
 
 	// Focus restoration
-	const [ isFirstRender, setIsFirstRender ] = useState( true );
+	const isInitialLocation = location.isInitial && ! location.isBack;
+
 	useEffect( () => {
 		// Only attempt to restore focus:
-		// - after the first render (to avoid moving focus on page load)
+		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
-		// - the wrapper ref has been assigned
-		if ( isFirstRender || ! isMatch || ! wrapperRef.current ) {
-			setIsFirstRender( false );
+		// - if the wrapper ref has been assigned
+		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
 			return;
 		}
 
@@ -105,7 +99,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 		}
 
 		elementToFocus.focus();
-	}, [ isFirstRender, isMatch ] );
+	}, [ isInitialLocation, isMatch ] );
 
 	if ( ! isMatch ) {
 		return null;

packages/components/src/navigator/types.ts

@@ -9,6 +9,7 @@ type NavigateOptions = {
 };
 
 export type NavigatorLocation = NavigateOptions & {
+	isInitial?: boolean;
 	isBack?: boolean;
 	path?: string;
 };