Code refactor with useIsLocationHashAddChannels.

plugins/woocommerce-admin/client/marketing/hooks/index.ts

@@ -2,3 +2,4 @@ export { useIntroductionBanner } from './useIntroductionBanner';
 export { useInstalledPlugins } from './useInstalledPlugins';
 export { useRegisteredChannels } from './useRegisteredChannels';
 export { useRecommendedChannels } from './useRecommendedChannels';
+export { useIsLocationHashAddChannels } from './useIsLocationHashAddChannels';

plugins/woocommerce-admin/client/marketing/hooks/useIsLocationHashAddChannels.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Internal dependencies
+ */
+import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
+
+export const useIsLocationHashAddChannels = () => {
+	const location = useLocation();
+
+	return location.hash === hashAddChannels;
+};

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx

@@ -5,16 +5,13 @@ import { useState, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { CardBody, CardDivider, Button, Icon } from '@wordpress/components';
 import { chevronUp, chevronDown } from '@wordpress/icons';
-import { useLocation } from 'react-router-dom';
 
 /**
  * Internal dependencies
  */
+import { useIsLocationHashAddChannels } from '~/marketing/hooks';
 import { RecommendedChannel } from '~/marketing/types';
-import {
-	idAddChannels,
-	hashAddChannels,
-} from '~/marketing/overview-multichannel/constants';
+import { idAddChannels } from '~/marketing/overview-multichannel/constants';
 import { RecommendedChannelsList } from './RecommendedChannelsList';
 import './RecommendedChannels.scss';
 
@@ -27,13 +24,13 @@ export const RecommendedChannels: React.FC< RecommendedChannelsType > = ( {
 } ) => {
 	const [ collapsed, setCollapsed ] = useState( true );
 	const buttonRef = useRef< HTMLAnchorElement >( null );
-	const location = useLocation();
+	const isLocationHashAddChannels = useIsLocationHashAddChannels();
 
 	useEffect( () => {
-		if ( buttonRef.current && location.hash === hashAddChannels ) {
+		if ( buttonRef.current && isLocationHashAddChannels ) {
 			buttonRef.current.focus();
 		}
-	}, [ location.hash ] );
+	}, [ isLocationHashAddChannels ] );
 
 	return (
 		<div className="woocommerce-marketing-recommended-channels">

plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx

@@ -3,7 +3,6 @@
  */
 import { useUser } from '@woocommerce/data';
 import { ScrollTo } from '@woocommerce/components';
-import { useLocation } from 'react-router-dom';
 
 /**
  * Internal dependencies
@@ -20,8 +19,8 @@ import {
 	useIntroductionBanner,
 	useRegisteredChannels,
 	useRecommendedChannels,
+	useIsLocationHashAddChannels,
 } from '~/marketing/hooks';
-import { hashAddChannels } from '~/marketing/overview-multichannel/constants';
 import './MarketingOverviewMultichannel.scss';
 import { CenteredSpinner } from '../components';
 
@@ -35,7 +34,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 		useRegisteredChannels();
 	const { loading: loadingRecommended, data: dataRecommended } =
 		useRecommendedChannels();
-	const location = useLocation();
+	const isLocationHashAddChannels = useIsLocationHashAddChannels();
 	const { currentUserCan } = useUser();
 
 	const shouldShowExtensions =
@@ -60,7 +59,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
 			) }
 			{ dataRegistered.length >= 1 && <Campaigns /> }
 			{ ( dataRegistered.length >= 1 || dataRecommended.length >= 1 ) &&
-				( location.hash === hashAddChannels ? (
+				( isLocationHashAddChannels ? (
 					<ScrollTo>
 						<Channels
 							registeredChannels={ dataRegistered }