optimization for re-rendering

src/components/BrowserCell/BrowserCell.react.js

@@ -221,7 +221,10 @@ class BrowserCell extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.value !== prevProps.value || this.props.isEditing !== prevProps.isEditing) {
+    const valueChanged = typeof this.props.value === 'object' && typeof prevProps.value === 'object'
+      ? JSON.stringify(this.props.value) !== JSON.stringify(prevProps.value)
+      : this.props.value !== prevProps.value;
+    if (valueChanged || this.props.isEditing !== prevProps.isEditing) {
       this.renderCellContent();
       this.props.value?._previousSave
         ?.then(() => this.renderCellContent())

src/components/BrowserRow/BrowserRow.react.js

@@ -93,11 +93,12 @@ export default class BrowserRow extends Component {
               attr = new Parse.Relation(obj, name);
               attr.targetClassName = columns[name].targetClass;
             } else if (type === 'Array' || type === 'Object') {
-              // This is needed to avoid unwanted conversions of objects to Parse.Objects.
-              // "Parse._encoding" is responsible to convert Parse data into raw data.
-              // Since array and object are generic types, we want to render them the way
-              // they were stored in the database.
-              attr = encode(obj.get(name), undefined, true);
+              const raw = obj.get(name);
+              if (raw !== undefined && raw !== null) {
+                attr = encode(raw, undefined, true);
+              } else {
+                attr = raw;
+              }
             }
           }
           let hidden = false;

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -88,14 +88,19 @@ export default class DataBrowser extends React.Component {
       );
       this.setState({ order });
     }
-    if (this.props.columns) {
-      this.setState({ numberOfColumns: Object.keys(this.props.columns).length })
+    const newNumberOfColumns = this.props.columns
+      ? Object.keys(this.props.columns).length
+      : 0;
+    if (newNumberOfColumns !== this.state.numberOfColumns) {
+      this.setState({ numberOfColumns: newNumberOfColumns });
+    }
+    if (props.data !== this.props.data || props.className !== this.props.className) {
+      this.setState({
+        selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
+        firstSelectedCell: null,
+        selectedData: [],
+      });
     }
-    this.setState({
-      selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
-      firstSelectedCell: null,
-      selectedData: [],
-    });
   }
 
   async componentDidMount() {