memoize and re-use selectedTab

WordPress · Oct 19, 2022 · 465d9e2 · 465d9e2
1 parent 4cf06cf
commit 465d9e2
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
@@ -7,7 +7,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -93,18 +93,21 @@ export function TabPanel( {
 	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
 		child.click();
 	};
-	const selectedTab = find( tabs, { name: selected } );
+	const selectedTab = useMemo(
+		() => find( tabs, { name: selected } ),
+		[ tabs, selected ]
+	);
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab ) {
+		// const newSelectedTab = find( tabs, { name: selected } );
+		if ( ! selectedTab ) {
 			setSelected(
 				initialTabName ||
 					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
 			);
 		}
-	}, [ tabs, selected, initialTabName ] );
+	}, [ tabs, selectedTab, initialTabName ] );
 
 	return (
 		<div className={ className }>