efficient defocussing

CHANGELOG.md

@@ -170,4 +170,15 @@
     Table styling has been changed for frozen rows and columns. Default styling change from:
 
     - frozen rows: { height: 500px } to { height: fit-content, max-height: 500px }
-    - frozen columns: { width: 500px } to { width: fit-content, max-width: 500px }
+    - frozen columns: { width: 500px } to { width: fit-content, max-width: 500px }
+
+## RC21 - Improve performance when the user clicks outside of the table
+
+    Pull Request: https://github.com/plotly/dash-table/pull/104
+
+    Clicking outside of the table was setting the table's `is_focused` property.
+    Setting component properties in Dash can be expensive: it can cause the
+    entire app to re-render.
+    Now, clicking outside the table will update the component more efficiently,
+    prevent excessive application re-renders.
+

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc20",
+  "version": "3.0.0rc21",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc20",
+  "version": "3.0.0rc21",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/components/ControlledTable/index.tsx

@@ -103,7 +103,14 @@ export default class ControlledTable extends Component<ControlledTableProps> {
     handleClickOutside = (event: any) => {
         const $el = this.$el;
 
-        if ($el && !$el.contains(event.target as Node)) {
+        if ($el &&
+            !$el.contains(event.target as Node) &&
+            /*
+             * setProps is expensive, it causes excessive re-rendering in Dash.
+             * so, only call when the table isn't already focussed, otherwise
+             * the app will excessively re-render on _every click on the page_
+             */
+            this.props.is_focused) {
             this.props.setProps({ is_focused: false });
         }
     }
@@ -752,4 +759,4 @@ export default class ControlledTable extends Component<ControlledTableProps> {
             )}
         </div>);
     }
-}
+}