Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RNMobile] Prevent unnecessary re-renders of RichText component due to color palettes prop #40615

Merged
merged 1 commit into from Apr 26, 2022
Merged

[RNMobile] Prevent unnecessary re-renders of RichText component due to color palettes prop #40615

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 13 additions & 8 deletions packages/rich-text/src/component/index.native.js
View file
Open in desktop
Expand Up @@ -51,6 +51,15 @@ const unescapeSpaces = ( text ) => {
return text.replace( / | /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',
Expand Down Expand Up @@ -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 {
Expand Down