Fix RichText rerendering when it shouldn't #12161

atimmer · 2018-11-21T09:18:07Z

Description

The prepareEditableTree and onChangeEditableValue function stacks would have a new reference on every render. This prevents that by memoized the stack based on the previous stack and the newly added function.

How has this been tested?

Tested using Yoast SEO. I am working on e2e tests to test that RichText's doesn't rerender too often.

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

The prepareEditableTree and onChangeEditableValue function stacks would have a new reference on every render. This prevents that by memoized the stack based on the previous stack and the newly added function.

youknowriad · 2018-11-21T09:24:56Z

packages/annotations/src/format/annotation.js

+ *
+ * @return {Object} The annotations props object.
+ */
+const getAnnotationObject = memize( ( annotations ) => {


Instead of memoizing function, I think it would be better for the registerFormatType function to do the memoization itself using a shallow comparison. This way it would work with any implementation of __experimentalGetPropsForEditableTreePreparation

That said, we're kind of running out of time, so I'm not considering this as blocking at the moment as it's a forward-compatible change.

Agreed, this sounds better.

youknowriad

I confirm that this does fix the Yoast incompatibility issue.

ellatrix · 2018-11-21T09:31:37Z

packages/annotations/src/store/selectors.js

@@ -4,6 +4,8 @@
 import createSelector from 'rememo';
 import { get, flatMap } from 'lodash';

+const emptyArray = [];


Minor: I think in other places we called this EMPTY_ARRAY.

Wouldn't be bad to have the same comment:

gutenberg/packages/editor/src/store/selectors.js

Lines 57 to 66 in 563ef41

/**

* Shared reference to an empty array for cases where it is important to avoid

* returning a new array reference on every invocation, as in a connected or

* other pure component which performs `shouldComponentUpdate` check on props.

* This should be used as a last resort, since the normalized data should be

* maintained by the reducer result in state.

*

* @type {Array}

*/

const EMPTY_ARRAY = [];

Minor: I think in other places we called this EMPTY_ARRAY.

Related guideline: https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#constants

ellatrix · 2018-11-21T09:35:24Z

packages/rich-text/src/register-format-type.js

@@ -119,6 +120,14 @@ export function registerFormatType( name, settings ) {

 	dispatch( 'core/rich-text' ).addFormatTypes( settings );

+	const emptyArray = [];
+	const getFunctionStackMemoized = memize( ( previousStack = emptyArray, newFunction ) => {


Would it work to keep the cache size to one?

Also, why do both this and prepareEditableTree need to be memoized? Could use some more clarification.

Probably not as we need one per RichText I think.

I don't think so, because a different function could be returned based on richTextIdentifier/blockClientId.

Just wondering because it's probably best to keep cache size as small as possible. I'm guessing the issue is just consecutive calls and nothing else.

So how big is this cache going to grow?

No way to cache per instance?

That's a good question though

ellatrix · 2018-11-21T09:37:49Z

packages/rich-text/src/register-format-type.js

@@ -119,6 +120,14 @@ export function registerFormatType( name, settings ) {

 	dispatch( 'core/rich-text' ).addFormatTypes( settings );

+	const emptyArray = [];


ellatrix · 2018-11-21T09:39:02Z

Just wondering, does this also fix #11595 (comment)?

youknowriad · 2018-11-21T09:39:56Z

@iseulde In my testing it doesn't fix it completely

atimmer · 2018-11-21T09:40:57Z

That is what I concluded too. It's probably not far away. I will dive into that further to completely fix it. But I thought that doesn't have to be in 4.5.1.

ellatrix · 2018-11-21T09:44:37Z

packages/annotations/src/format/annotation.js

+/**
+ * External dependencies
+ */
+import memize from 'memize';


I don't see this added as a dependency.

ellatrix · 2018-11-21T09:48:09Z

packages/annotations/package.json

@@ -26,6 +26,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/rich-text": "file:../rich-text",
 		"lodash": "^4.17.10",
+		"memize": "^1.0.5",


I think we also need it on the server side.

No we don't, there's no script for memize

Oh, cool then :)

Seems good now

packages/annotations/package.json

Fix RichText rerendering when it shouldn't

254cf33

The prepareEditableTree and onChangeEditableValue function stacks would have a new reference on every render. This prevents that by memoized the stack based on the previous stack and the newly added function.

youknowriad reviewed Nov 21, 2018

View reviewed changes

youknowriad approved these changes Nov 21, 2018

View reviewed changes

youknowriad added this to the 4.5.1 milestone Nov 21, 2018

ellatrix reviewed Nov 21, 2018

View reviewed changes

Rename emptyArray to EMPTY_ARRAY

2fc48e9

atimmer force-pushed the fix/optimize-rich-text-rerenders branch from 8ba55a9 to 2fc48e9 Compare November 21, 2018 09:39

ellatrix approved these changes Nov 21, 2018

View reviewed changes

ellatrix previously requested changes Nov 21, 2018

View reviewed changes

Add memize as a dependency to annotations package

cb37598

ellatrix reviewed Nov 21, 2018

View reviewed changes

youknowriad merged commit 01be7ac into master Nov 21, 2018

youknowriad deleted the fix/optimize-rich-text-rerenders branch November 21, 2018 10:02

gziolo reviewed Nov 21, 2018

View reviewed changes

packages/annotations/package.json Show resolved Hide resolved

youknowriad mentioned this pull request Nov 21, 2018

JS error when editing block #12165

Closed

atimmer mentioned this pull request Nov 21, 2018

Annotations: Add end-to-end tests for annotations API #12186

Closed

4 tasks

This was referenced Dec 10, 2018

Performance: Improve the initial loading time and the feeling fo smoothness while typing in blocks. #11782

Closed

Performance: Reduced responsiveness when using Annotations API #12642

Closed

Gutenberg with Yoast SEO bugs down my site #12508

Closed

omarreiss added the [Feature] Annotations Adding annotation functionality label Mar 26, 2019

ellatrix mentioned this pull request Mar 27, 2019

Annotations & Performance: remove use of Memize #14664

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix RichText rerendering when it shouldn't #12161

Fix RichText rerendering when it shouldn't #12161

atimmer commented Nov 21, 2018 •

edited

Loading

youknowriad Nov 21, 2018

ellatrix Nov 21, 2018

youknowriad left a comment

ellatrix Nov 21, 2018

ellatrix Nov 21, 2018

aduth Nov 27, 2018

ellatrix Nov 21, 2018

ellatrix Nov 21, 2018

youknowriad Nov 21, 2018

atimmer Nov 21, 2018

ellatrix Nov 21, 2018

ellatrix Nov 21, 2018

ellatrix Nov 21, 2018

youknowriad Nov 21, 2018

ellatrix Nov 21, 2018

ellatrix commented Nov 21, 2018

youknowriad commented Nov 21, 2018

atimmer commented Nov 21, 2018

ellatrix Nov 21, 2018

ellatrix Nov 21, 2018

youknowriad Nov 21, 2018

ellatrix Nov 21, 2018

	/**
	* Shared reference to an empty array for cases where it is important to avoid
	* returning a new array reference on every invocation, as in a connected or
	* other pure component which performs `shouldComponentUpdate` check on props.
	* This should be used as a last resort, since the normalized data should be
	* maintained by the reducer result in state.
	*
	* @type {Array}
	*/
	const EMPTY_ARRAY = [];

		@@ -119,6 +120,14 @@ export function registerFormatType( name, settings ) {

		dispatch( 'core/rich-text' ).addFormatTypes( settings );

		const emptyArray = [];

Fix RichText rerendering when it shouldn't #12161

Fix RichText rerendering when it shouldn't #12161

Conversation

atimmer commented Nov 21, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented Nov 21, 2018

youknowriad commented Nov 21, 2018

atimmer commented Nov 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atimmer commented Nov 21, 2018 •

edited

Loading