Upgrade React version to 16.13.1 (#21289)

Co-authored-by: epiqueras <epiquerass@gmail.com>
Co-authored-by: Jon Q <hello@jonquach.com>

lib/client-assets.php

@@ -208,6 +208,20 @@ function gutenberg_override_style( $styles, $handle, $src, $deps = array(), $ver
 function gutenberg_register_vendor_scripts( $scripts ) {
 	$suffix = SCRIPT_DEBUG ? '' : '.min';
 
+	$react_suffix = ( SCRIPT_DEBUG ? '.development' : '.production' ) . $suffix;
+	gutenberg_register_vendor_script(
+		$scripts,
+		'react',
+		'https://unpkg.com/react@16.13.1/umd/react' . $react_suffix . '.js',
+		array( 'wp-polyfill' )
+	);
+	gutenberg_register_vendor_script(
+		$scripts,
+		'react-dom',
+		'https://unpkg.com/react-dom@16.13.1/umd/react-dom' . $react_suffix . '.js',
+		array( 'react' )
+	);
+
 	/*
 	 * This script registration and the corresponding function should be removed
 	 * once the plugin is updated to support WordPress 5.4.0 and newer.

package.json

@@ -182,10 +182,10 @@
 		"prettier": "npm:wp-prettier@2.0.5",
 		"progress": "2.0.3",
 		"puppeteer": "npm:puppeteer-core@3.0.0",
-		"react": "16.9.0",
-		"react-dom": "16.9.0",
+		"react": "16.13.1",
+		"react-dom": "16.13.1",
 		"react-native": "0.61.5",
-		"react-test-renderer": "16.9.0",
+		"react-test-renderer": "16.13.1",
 		"rimraf": "3.0.2",
 		"rtlcss": "2.4.0",
 		"sass-loader": "8.0.2",

packages/components/src/tooltip/test/index.js

@@ -186,7 +186,7 @@ describe( 'Tooltip', () => {
 				target: wrapper.find( 'button > span' ).getDOMNode(),
 			} );
 
-			expect( originalMouseEnter ).toHaveBeenCalled();
+			expect( originalMouseEnter ).not.toHaveBeenCalled();
 
 			const popover = wrapper.find( 'Popover' );
 			wrapper.instance().delayedSetIsOver.flush();

packages/components/src/unit-control/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -48,14 +48,21 @@ function UnitControl(
 		initial: initialUnit,
 	} );
 
+	/*
+	 * Storing parsed unit changes to be applied during the onChange callback
+	 * cycle.
+	 */
+	const nextParsedUnitRef = useRef();
+
 	const classes = classnames( 'components-unit-control', className );
 
 	const handleOnChange = ( next, changeProps ) => {
 		if ( next === '' ) {
 			onChange( '', changeProps );
 			return;
 		}
-		/**
+
+		/*
 		 * Customizing the onChange callback.
 		 * This allows as to broadcast a combined value+unit to onChange.
 		 */
@@ -65,7 +72,22 @@ function UnitControl(
 			value,
 			unit
 		);
-		const nextValue = `${ parsedValue }${ parsedUnit }`;
+		const nextParsedUnit = nextParsedUnitRef.current;
+
+		/*
+		 * If we've noticed a (parsed) unit change, which would have been
+		 * stored in nextParsedUnitRef, we'll update our local unit set,
+		 * as well as fire the onUnitChange callback.
+		 */
+		if ( nextParsedUnit ) {
+			onUnitChange( nextParsedUnit, changeProps );
+			setUnit( nextParsedUnit );
+			// We have to reset this ref value to properly track new changes.
+			nextParsedUnitRef.current = null;
+		}
+
+		const nextUnit = nextParsedUnit || parsedUnit;
+		const nextValue = `${ parsedValue }${ nextUnit }`;
 
 		onChange( nextValue, changeProps );
 	};
@@ -98,7 +120,7 @@ function UnitControl(
 		const { type, payload } = action;
 		const event = payload?.event;
 
-		/**
+		/*
 		 * Customizes the commit interaction.
 		 *
 		 * This occurs when pressing ENTER to fire a change.
@@ -119,7 +141,15 @@ function UnitControl(
 
 			// Update unit if the incoming parsed unit is different.
 			if ( unit !== parsedUnit ) {
-				handleOnUnitChange( parsedUnit, { event } );
+				/*
+				 * We start by storing the next parsedUnit value in our
+				 * nextParsedUnitRef. We can't set the unit during this
+				 * stateReducer callback as it cause state update
+				 * conflicts within React's render cycle.
+				 *
+				 * https://github.com/facebook/react/issues/18178
+				 */
+				nextParsedUnitRef.current = parsedUnit;
 			}
 		}
 

packages/data/src/namespace-store/index.js

@@ -4,6 +4,7 @@
 import { createStore, applyMiddleware } from 'redux';
 import { flowRight, get, mapValues } from 'lodash';
 import combineReducers from 'turbo-combine-reducers';
+import EquivalentKeyMap from 'equivalent-key-map';
 
 /**
  * WordPress dependencies
@@ -19,6 +20,34 @@ import metadataReducer from './metadata/reducer';
 import * as metadataSelectors from './metadata/selectors';
 import * as metadataActions from './metadata/actions';
 
+/**
+ * Create a cache to track whether resolvers started running or not.
+ *
+ * @return {Object} Resolvers Cache.
+ */
+function createResolversCache() {
+	const cache = {};
+	return {
+		isRunning( selectorName, args ) {
+			return cache[ selectorName ] && cache[ selectorName ].get( args );
+		},
+
+		clear( selectorName, args ) {
+			if ( cache[ selectorName ] ) {
+				cache[ selectorName ].delete( args );
+			}
+		},
+
+		markAsRunning( selectorName, args ) {
+			if ( ! cache[ selectorName ] ) {
+				cache[ selectorName ] = new EquivalentKeyMap();
+			}
+
+			cache[ selectorName ].set( args, true );
+		},
+	};
+}
+
 /**
  * @typedef {WPDataRegistry} WPDataRegistry
  */
@@ -37,6 +66,7 @@ import * as metadataActions from './metadata/actions';
 export default function createNamespace( key, options, registry ) {
 	const reducer = options.reducer;
 	const store = createReduxStore( key, options, registry );
+	const resolversCache = createResolversCache();
 
 	let resolvers;
 	const actions = mapActions(
@@ -64,7 +94,12 @@ export default function createNamespace( key, options, registry ) {
 		store
 	);
 	if ( options.resolvers ) {
-		const result = mapResolvers( options.resolvers, selectors, store );
+		const result = mapResolvers(
+			options.resolvers,
+			selectors,
+			store,
+			resolversCache
+		);
 		resolvers = result.resolvers;
 		selectors = result.selectors;
 	}
@@ -166,7 +201,6 @@ function createReduxStore( key, options, registry ) {
  *                           public facing API. Selectors will get passed the
  *                           state as first argument.
  * @param {Object} store     The store to which the selectors should be mapped.
- *
  * @return {Object} Selectors mapped to the provided store.
  */
 function mapSelectors( selectors, store ) {
@@ -215,12 +249,13 @@ function mapActions( actions, store ) {
  * Resolvers are side effects invoked once per argument set of a given selector call,
  * used in ensuring that the data needs for the selector are satisfied.
  *
- * @param {Object} resolvers   Resolvers to register.
- * @param {Object} selectors   The current selectors to be modified.
- * @param {Object} store       The redux store to which the resolvers should be mapped.
- * @return {Object}            An object containing updated selectors and resolvers.
+ * @param {Object} resolvers      Resolvers to register.
+ * @param {Object} selectors      The current selectors to be modified.
+ * @param {Object} store          The redux store to which the resolvers should be mapped.
+ * @param {Object} queue          Resolvers async queue.
+ * @param {Object} resolversCache Resolvers Cache.
  */
-function mapResolvers( resolvers, selectors, store ) {
+function mapResolvers( resolvers, selectors, store, resolversCache ) {
 	const mappedResolvers = mapValues( resolvers, ( resolver ) => {
 		const { fulfill: resolverFulfill = resolver } = resolver;
 		return { ...resolver, fulfill: resolverFulfill };
@@ -237,13 +272,15 @@ function mapResolvers( resolvers, selectors, store ) {
 			async function fulfillSelector() {
 				const state = store.getState();
 				if (
-					typeof resolver.isFulfilled === 'function' &&
-					resolver.isFulfilled( state, ...args )
+					resolversCache.isRunning( selectorName, args ) ||
+					( typeof resolver.isFulfilled === 'function' &&
+						resolver.isFulfilled( state, ...args ) )
 				) {
 					return;
 				}
 
 				const { metadata } = store.__unstableOriginalGetState();
+
 				if (
 					metadataSelectors.hasStartedResolution(
 						metadata,
@@ -254,18 +291,23 @@ function mapResolvers( resolvers, selectors, store ) {
 					return;
 				}
 
-				store.dispatch(
-					metadataActions.startResolution( selectorName, args )
-				);
-				await fulfillResolver(
-					store,
-					mappedResolvers,
-					selectorName,
-					...args
-				);
-				store.dispatch(
-					metadataActions.finishResolution( selectorName, args )
-				);
+				resolversCache.markAsRunning( selectorName, args );
+
+				setTimeout( async () => {
+					resolversCache.clear( selectorName, args );
+					store.dispatch(
+						metadataActions.startResolution( selectorName, args )
+					);
+					await fulfillResolver(
+						store,
+						mappedResolvers,
+						selectorName,
+						...args
+					);
+					store.dispatch(
+						metadataActions.finishResolution( selectorName, args )
+					);
+				} );
 			}
 
 			fulfillSelector( ...args );

packages/data/src/namespace-store/test/index.js

@@ -4,6 +4,8 @@
 import { createRegistry } from '../../registry';
 import { createRegistryControl } from '../../factory';
 
+jest.useFakeTimers();
+
 describe( 'controls', () => {
 	let registry;
 
@@ -80,16 +82,14 @@ describe( 'controls', () => {
 					.select( 'store' )
 					.hasFinishedResolution( 'getItems' );
 				if ( isFinished ) {
-					expect( registry.select( 'store' ).getItems() ).toEqual( [
-						1,
-						2,
-						3,
-					] );
+					const items = registry.select( 'store' ).getItems();
+					expect( items ).toEqual( [ 1, 2, 3 ] );
 				}
 				resolve();
 			} );
 
 			registry.select( 'store' ).getItems();
+			jest.runAllTimers();
 		} );
 	} );
 	describe( 'selectors have expected value for the `hasResolver` property', () => {