Performance improvement on (pattern-matching) callbacks

dash/dash-renderer/src/actions/dependencies_ts.ts

@@ -233,13 +233,27 @@ export const getReadyCallbacks = (
  }
  }
 
+ // Ramda.JS `difference` function is slow because it compares objects entirely
+ // This cause the following `filter` to be exponentially slow as the number of inputs or outputs grow
+ // We can optimize this by comparing only the `id+prop` part of the inputs & outputs.
+ // Original difference takes 380ms on average to compute difference between 200 inputs and 1 output.
+ // The following function takes 1-2ms on average.
+ const differenceBasedOnId = (inputs: any[], outputs: any[]): any[] =>
+ inputs.filter(
+ input =>
+ !outputs.some(
+ output =>
+ combineIdAndProp(input) === combineIdAndProp(output)
+ )
+ );
+
  // Find `requested` callbacks that do not depend on a outstanding output (as either input or state)
  // Outputs which overlap an input do not count as an outstanding output
  return filter(
  cb =>
  all<ILayoutCallbackProperty>(
  cbp => !outputsMap[combineIdAndProp(cbp)],
- difference(
+ differenceBasedOnId(
  flatten(cb.getInputs(paths)),
  flatten(cb.getOutputs(paths))
  )

dash/dash-renderer/src/observers/prioritizedCallbacks.ts

@@ -1,4 +1,4 @@
-import {find, flatten, map, partition, pluck, sort, uniq} from 'ramda';
+import {find, flatten, map, partition, sort} from 'ramda';
 
 import {IStoreState} from '../store';
 
@@ -53,13 +53,16 @@ const getStash = (
  return {allOutputs, allPropIds};
 };
 
-const getIds = (cb: ICallback, paths: any) =>
- uniq(
- pluck('id', [
- ...flatten(cb.getInputs(paths)),
- ...flatten(cb.getState(paths))
- ])
- );
+const getIds = (cb: ICallback, paths: any) => {
+ const items = [
+ ...flatten(cb.getInputs(paths)),
+ ...flatten(cb.getState(paths))
+ ];
+
+ const uniqueIds = new Map(items.map(item => [stringifyId(item.id), item]));
+ const uniqueItems = Array.from(uniqueIds.values());
+ return uniqueItems;
+};
 
 const observer: IStoreObserverDefinition<IStoreState> = {
  observer: async ({dispatch, getState}) => {