title: View is not updated on React
body: <p>This is my component, I though that the problem was , that I0m using an array of objects an then is not detected as a different array and it doesn't change but now I'm using <code>lodash</code> <code>deepClone</code> function  and I have the same problem, nothing changes on the view <code>filterPerBlocked</code> function is executed</p>
  <pre><code>import React, {useState, useEffect, cloneElement} from 'react';
  import './composites.css';
  import Header from &quot;../Header&quot;;
  import CompositeResult from &quot;./CompositeResult&quot;;
  import compositeResult from &quot;./CompositeResult&quot;;
  import _ from &quot;lodash&quot;;
  
  
  // Clean empty categories
  let filtered = window.COMPOSITES.filter(function (value, index, arr) {
      return value.composites.length &gt; 0;
  });
  
  const chunk = (arr, size) =&gt;
      Array.from({length: Math.ceil(arr.length / size)}, (v, i) =&gt;
          arr.slice(i * size, i * size + size)
      );
  
  // const cloneComposites = (array) =&gt;{
  //     return array.map( (composite) =&gt; {
  //         return JSON.parse(JSON.stringify(composite))
  //     })
  // }
  
  const chunked = chunk(filtered,Math.round(filtered.length / 2));
  
  export default function Composites() {
      const [composites, setComposites] = useState(chunked);
      const [loading, setLoading] = useState(true);
  
      useEffect(() =&gt; {
          setLoading(false)
      },[]);
  
      const filterPerBlocked = (showBlocked) =&gt; {
  
          let filtered_copy = _.cloneDeep(filtered)
          debugger
          filtered_copy.forEach((category) =&gt; {
              let filtered_composites = category.composites.filter( composite =&gt; composite.blocked == showBlocked )
              category.composites = filtered_composites;
          });
          filtered_copy = chunk(filtered_copy, filtered_copy.length/2);
          setComposites(filtered_copy)
      }
  
      return (
          &lt;div&gt;
              &lt;Header&gt;&lt;/Header&gt;
              &lt;div className=&quot;sort-button-row&quot;&gt;
                  &lt;button className=&quot;btn btn-primary&quot; onClick={ () =&gt; filterPerBlocked(true)}&gt;Only blocked&lt;/button&gt;
                  &lt;button className=&quot;btn btn-primary&quot; onClick={() =&gt; filterPerBlocked(false) }&gt;Only not blocked&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className=&quot;card shadow py-2 mb-2&quot;&gt;
                  &lt;div className=&quot;card-body&quot;&gt;
                      {loading === true ? (
                          &lt;div className={'text-center'}&gt;
                              &lt;span className=&quot;fa fa-spin fa-spinner fa-4x&quot;&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      ) : (
                          &lt;div&gt;
                              &lt;div className=&quot;composite-columns&quot;&gt;
                                  {composites.map((result, key) =&gt;
                                      &lt;div className=&quot;col&quot; key={key}&gt;
                                          {result.map(resultComposites =&gt;
                                              &lt;div key={resultComposites.category.id}&gt;
                                                  &lt;CompositeResult name={resultComposites.category.name}
                                                                   composites={resultComposites.composites}&gt;&lt;/CompositeResult&gt;
                                              &lt;/div&gt;
                                          )}
                                      &lt;/div&gt;
                                  )}
                              &lt;/div&gt;
                          &lt;/div&gt;
                      )}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  
  }
  </code></pre>