[RNMobile] memoize global styles in context to avoid unnecessary rend…

…ers (#28591) * use memo with stringify to avoid a huge amount of unnecessary renders
WordPress · Feb 5, 2021 · 19c17f0 · 19c17f0
1 parent 14424ee
commit 19c17f0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 40 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -2,15 +2,17 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
+import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Component, createRef } from '@wordpress/element';
+import { Component, createRef, useMemo } from '@wordpress/element';
 import {
  GlobalStylesContext,
  getMergedGlobalStyles,
  alignmentHelpers,
+ useGlobalStyles,
 } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -28,6 +30,7 @@ import BlockEdit from '../block-edit';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
 
+const emptyArray = [];
 function BlockForType( {
  attributes,
  clientId,
@@ -46,47 +49,50 @@ function BlockForType( {
  wrapperProps,
  blockWidth,
 } ) {
- const defaultColors = useEditorFeature( 'color.palette' ) || [];
+ const defaultColors = useEditorFeature( 'color.palette' ) || emptyArray;
+ const globalStyle = useGlobalStyles();
+ const mergedStyle = useMemo( () => {
+ return getMergedGlobalStyles(
+ globalStyle,
+ wrapperProps.style,
+ attributes,
+ defaultColors
+ );
+ }, [
+ defaultColors,
+ globalStyle,
+ // I couldn't simply use attributes and wrapperProps.styles as a dependency because they are almost always a new reference.
+ // Thanks to the JSON.stringify we check if the value is the same instead of reference.
+ JSON.stringify( wrapperProps.style ),
+ JSON.stringify(
+ pick( attributes, GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES )
+ ),
+ ] );
 
  return (
- <GlobalStylesContext.Consumer>
- { ( globalStyle ) => {
- const mergedStyle = getMergedGlobalStyles(
- globalStyle,
- wrapperProps.style,
- attributes,
- defaultColors
- );
-
- return (
- <GlobalStylesContext.Provider value={ mergedStyle }>
- <BlockEdit
- name={ name }
- isSelected={ isSelected }
- attributes={ attributes }
- setAttributes={ onChange }
- onFocus={ onBlockFocus }
- onReplace={ onReplace }
- insertBlocksAfter={ insertBlocksAfter }
- mergeBlocks={ mergeBlocks }
- onCaretVerticalPositionChange={
- onCaretVerticalPositionChange
- }
- // Block level styles
- wrapperProps={ wrapperProps }
- // inherited styles merged with block level styles
- mergedStyle={ mergedStyle }
- clientId={ clientId }
- parentWidth={ parentWidth }
- contentStyle={ contentStyle }
- onDeleteBlock={ onDeleteBlock }
- blockWidth={ blockWidth }
- />
- <View onLayout={ getBlockWidth } />
- </GlobalStylesContext.Provider>
- );
- } }
- </GlobalStylesContext.Consumer>
+ <GlobalStylesContext.Provider value={ mergedStyle }>
+ <BlockEdit
+ name={ name }
+ isSelected={ isSelected }
+ attributes={ attributes }
+ setAttributes={ onChange }
+ onFocus={ onBlockFocus }
+ onReplace={ onReplace }
+ insertBlocksAfter={ insertBlocksAfter }
+ mergeBlocks={ mergeBlocks }
+ onCaretVerticalPositionChange={ onCaretVerticalPositionChange }
+ // Block level styles
+ wrapperProps={ wrapperProps }
+ // inherited styles merged with block level styles
+ mergedStyle={ mergedStyle }
+ clientId={ clientId }
+ parentWidth={ parentWidth }
+ contentStyle={ contentStyle }
+ onDeleteBlock={ onDeleteBlock }
+ blockWidth={ blockWidth }
+ />
+ <View onLayout={ getBlockWidth } />
+ </GlobalStylesContext.Provider>
  );
 }
 

diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -19,6 +19,8 @@ import {
 
 const GlobalStylesContext = createContext( { style: {} } );
 
+GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
+
 export const getMergedGlobalStyles = (
  globalStyle,
  wrapperPropsStyle,