From 465d9e2087c1a60afb9986cc09f420c998289999 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 19 Oct 2022 16:35:57 -0400 Subject: [PATCH] memoize and re-use selectedTab --- packages/components/src/tab-panel/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx index 87fba1b7265579..95dce691ec3d9d 100644 --- 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 (