From 2de4facb9b8b2bec72fc5bd9e660485f4d08dc57 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Tue, 26 Apr 2022 13:26:40 +0200
Subject: [PATCH] Memoize color palettes prop to prevent unnecessary re-renders

---
 .../rich-text/src/component/index.native.js   | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index 80bf4a0f2d901..f460019df8b3c 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -51,6 +51,15 @@ const unescapeSpaces = ( text ) => {
 	return text.replace( /&nbsp;|&#160;/gi, ' ' );
 };
 
+// The flattened color palettes array is memoized to ensure that the same array instance is
+// returned for the colors palettes. This value might be used as a prop, so having the same
+// instance will prevent unnecessary re-renders of the RichText component.
+const flatColorPalettes = memize( ( colorsPalettes ) => [
+	...( colorsPalettes?.theme || [] ),
+	...( colorsPalettes?.custom || [] ),
+	...( colorsPalettes?.default || [] ),
+] );
+
 const gutenbergFormatNamesToAztec = {
 	'core/bold': 'bold',
 	'core/italic': 'italic',
@@ -1263,14 +1272,10 @@ export default compose( [
 
 		const settings = getSettings();
 		const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles;
-		const colorsPalettes = settings?.__experimentalFeatures?.color?.palette;
-		const allColorsPalette = [
-			...( colorsPalettes?.theme || [] ),
-			...( colorsPalettes?.custom || [] ),
-			...( colorsPalettes?.default || [] ),
-		];
-		const colorPalette = colorsPalettes
-			? allColorsPalette
+
+		const colorPalettes = settings?.__experimentalFeatures?.color?.palette;
+		const colorPalette = colorPalettes
+			? flatColorPalettes( colorPalettes )
 			: settings?.colors;
 
 		return {