From 0b7e6d3aea2ddea089614efcfa1994109ff7785a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 27 Mar 2023 12:37:43 +0100
Subject: [PATCH] Fix TabPanel initial rendering

---
 packages/components/src/tab-panel/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index bcd815ba8886d5..b2af12b90c85f5 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -6,7 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -104,7 +109,7 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	// Handle selecting the initial tab.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// If there's a selected tab, don't override it.
 		if ( selectedTab ) {
 			return;