performance fixes - don't invalidate as much by using reactions in place of computd values; don't make things active when things are dragged unless CanEmbed; fix for linkBox to use reaction.

1 files changed, 19 insertions, 2 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 493f40d77..6e4b9ec07 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { computed, observable, runInAction } from 'mobx';
+import { computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
@@ -78,6 +78,8 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
     public static SetSafeMode(safeMode: boolean) {
         this._safeMode = safeMode;
     }
+    private reactionDisposer: IReactionDisposer | undefined;
+    @observable _isContentActive: boolean | undefined;
 
     protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
@@ -86,6 +88,21 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
         runInAction(() => (this._annotationKeySuffix = returnEmptyString));
     }
 
+    componentDidMount() {
+        // we use a reaction/observable instead of a computed value to reduce invalidations.
+        // There are many variables that aggregate into this boolean output - a change in any of them
+        // will cause downstream invalidations even if the computed value doesn't change.  By making
+        // this a reaction, downstream invalidations only occur when the reaction value actually changes.
+        this.reactionDisposer = reaction(
+            () => (this.isAnyChildContentActive() ? true : this.props.isContentActive()),
+            active => (this._isContentActive = active),
+            { fireImmediately: true }
+        );
+    }
+    componentWillUnmount() {
+        this.reactionDisposer?.();
+    }
+
     get collectionViewType(): CollectionViewType | undefined {
         const viewField = StrCast(this.layoutDoc._type_collection);
         if (CollectionView._safeMode) {
@@ -220,7 +237,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
     childHideResizeHandles = () => this.props.childHideResizeHandles?.() ?? BoolCast(this.Document.childHideResizeHandles);
     childHideDecorationTitle = () => this.props.childHideDecorationTitle?.() ?? BoolCast(this.Document.childHideDecorationTitle);
     childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.rootDoc.childLayoutTemplate, Doc, null);
-    isContentActive = (outsideReaction?: boolean) => (this.isAnyChildContentActive() ? true : this.props.isContentActive());
+    isContentActive = (outsideReaction?: boolean) => this._isContentActive;
 
     render() {
         TraceMobx();