Style Book: Avoid state/effect combo when generating values (#66446)

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ramonjd <[email protected]>

packages/edit-site/src/components/style-book/index.js

@@ -24,13 +24,7 @@ import {
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import {
-	useMemo,
-	useState,
-	memo,
-	useContext,
-	useEffect,
-} from '@wordpress/element';
+import { useMemo, useState, memo, useContext } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -148,7 +142,7 @@ function StyleBook( {
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const colors = useMultiOriginPalettes();
-	const [ examples, setExamples ] = useState( () => getExamples( colors ) );
+	const examples = useMemo( () => getExamples( colors ), [ colors ] );
 	const tabs = useMemo(
 		() =>
 			getTopLevelStyleBookCategories().filter( ( category ) =>
@@ -159,11 +153,6 @@ function StyleBook( {
 		[ examples ]
 	);
 
-	// Ensure color examples are kept in sync with Global Styles palette changes.
-	useEffect( () => {
-		setExamples( getExamples( colors ) );
-	}, [ colors ] );
-
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {