title: AgGrid crashes on re-render in React application
body: <p>I have a React + Typescript application that displays data using AgGrid. The data is fetched from a server and then fed to AgGrid, and we have multiple options that the user can interact with that could potentially change the data displayed, such as Filters, paging, and some other custom stuff. </p>
  
  <p>The data that is displayed is first fetched and then displayed in full. For example, we fetch 25 rows and display all of them, we are not using any of AgGrid's paging features. </p>
  
  <p>If a user makes a change to one of the parameters and the data <em>doesn't</em> change (for example, adding a filter which captures every single item already displayed), the data will be re-fetched, and then fed to AgGrid again, however this will cause AgGrid to crash. </p>
  
  <p>This only happens when the data doesn't change. </p>
  
  <p>The error that is occuring is the following:</p>
  
  <pre><code>The above error occurred in the &lt;AgGridReact&gt; component:
      in AgGridReact (at ag-collections/index.tsx:250)
      in div (at ag-collections/index.tsx:240)
      in div (created by ForwardRef(Paper))
      in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
      in WithStyles(ForwardRef(Paper)) (at ag-collections/index.tsx:225)
      in main (at main/index.tsx:59)
      in div (at main/index.tsx:36)
      in Component (created by WithStyles(Component))
      in WithStyles(Component) (at ag-collections/index.tsx:218)
      in TableAg (created by Context.Consumer)
      in Connect(TableAg) (created by Connect(TableAg))
      in Connect(TableAg) (created by Context.Consumer)
      in withRouter(Connect(TableAg)) (created by WithStyles(withRouter(Connect(TableAg))))
      in WithStyles(withRouter(Connect(TableAg))) (created by Context.Consumer)
      in Route (at routes.tsx:20)
      in Switch (at routes.tsx:16)
      in Routes (at app.tsx:50)
      in ThemeProvider (at app.tsx:48)
      in Route (created by QueryParamProvider)
      in QueryParamProvider (at app.tsx:47)
      in Provider (at app.tsx:46)
      in App (at src/index.tsx:8)
      in Router (created by HashRouter)
      in HashRouter (at src/index.tsx:7)
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit &lt;link removed&gt; to learn more about error boundaries. index.js:1437
  TypeError: can't define property "areEquivPropertyTracking": Array is not extensible
  changeDetectionService.js:147
  TypeError: can't define property "areEquivPropertyTracking": Array is not extensible
  </code></pre>
  
  <p>The line in question in <code>changeDetectionService.js</code> is:</p>
  
  <pre class="lang-js prettyprint-override"><code>      if (newA) {
          a.areEquivPropertyTracking = []; // LINE 147
        } else if (a.areEquivPropertyTracking.some(function (other) {
          return other === b;
        })) return true;
  
        if (newB) {
          b.areEquivPropertyTracking = [];
        } else if (b.areEquivPropertyTracking.some(function (other) {
          return other === a;
        })) {
          return true;
        }
  
  </code></pre>
  
  <p>As far as I can tell, they are trying to create a new item on the object a, but this is being forbidden. </p>
  
  <p>If I need to provide anything else I can try to do so. How can I go about fixing this?</p>