StatsModule: Optimize data selection and render

client/lib/create-selector/README.md

@@ -28,6 +28,13 @@ const sitePosts = getSitePosts( state, siteId );
 
 This result would only be calculated once, so long as `state.posts` remains the same.
 
+`createSelectorPerKey` accept the same parameters as `createSelector`.
+The difference is how it invalidate the cache and as the name suggest it is per-key and not per-selector.
+
+For example, the stats module have state section that stores all the different stats types keyed by a query. This function allows the dependent data function to return a very specific sub-tree of the state and if that sub-tree changes only the current cache key (3rd parameter) will be invalidated. In the stats case when authors stats changes only it will be invalidated while posts stats will still be served from the cache.
+
+Please note the effect might be higher memory usage because invalid cache keys will not be reevaluated until they are requested, which might never happen.
+
 ## FAQ
 
 ### What is a memoized selector?

client/lib/create-selector/index.js

@@ -3,6 +3,7 @@
  */
 import memoize from 'lodash/memoize';
 import shallowEqual from 'react-pure-render/shallowEqual';
+import { isEqual } from 'lodash';
 
 /**
  * Constants
@@ -105,3 +106,28 @@ export default function createSelector( selector, getDependants = DEFAULT_GET_DE
 	}, { memoizedSelector } );
 }
 
+export function createSelectorPerKey( selector, getDependants = DEFAULT_GET_DEPENDANTS, getCacheKey = DEFAULT_GET_CACHE_KEY ) {
+	const memoizedSelector = memoize( selector, getCacheKey );
+	const lastDependantsByKey = {};
+
+	if ( Array.isArray( getDependants ) ) {
+		getDependants = makeSelectorFromArray( getDependants );
+	}
+
+	return Object.assign( function( state, ...args ) {
+		let currentDependants = getDependants( state, ...args );
+		if ( ! Array.isArray( currentDependants ) ) {
+			currentDependants = [ currentDependants ];
+		}
+
+		const cacheKey = getCacheKey( state, ...args );
+		const lastDependants = lastDependantsByKey[ cacheKey ];
+		if ( lastDependants && ! shallowEqual( currentDependants, lastDependants ) ) {
+			memoizedSelector.cache.delete( cacheKey );
+		}
+
+		lastDependantsByKey[ cacheKey ] = currentDependants;
+
+		return memoizedSelector( state, ...args );
+	}, { memoizedSelector } );
+}