title: React useState with sorted array does not cause re-render of SemanticUI table if initial sorting is done
body: <p>I have a table with SemanticUI that renders a list of companies and allows the list to be resorted based on clicking the header of the table.  I thought I had this wrapped up working fine (the dev env is sending me a pre-sorted list), but when writing tests, I realized I cannot guarantee the list is pre-sorted.<br>
  So I edited my initial <code>useState</code> logic to have a sort function which is the same logic for the header click:</p>
  
  <p>BEFORE (works):
  <code>const [data, setData] = useState(companies);</code></p>
  
  <p>AFTER (does not work):
  <code>const [data, setData] = useState(companySortData(companies, COLUMN_NAME.NAME));</code></p>
  
  <p>The initial UI looks OK with both above, but when I click the header, this is where the issue appears: the UI does not change (re-render).</p>
  
  <p>In my stepping through the code, I see that the correctly RE-sorted array is there, but somewhere in the React internals, the array does not trigger a state change.</p>
  
  <p>I have tried a plethora of options including: 1) changing the state so that the <code>data</code> is part of the <code>sortedColumnData</code>, 2) making an <code>useEffect</code> hook that allows for the initial company data to be there and then we <code>setData</code>.  3) trying to create a <code>usePrevious</code> hook that compares the <code>sortedColumnData</code> and then calls <code>setData</code> if that dependency changes.  4) changed from a Functional to PureComponent, but this isn't fully solving it either.</p>
  
  <p>I know that React only shallow diffs so that might be part of it, but the data array shape itself is shallow so I thought this would be picked up (which is does if I do not initial sort data):</p>
  
  <pre><code>{
    id: "newnew",
    name: "A New New Company",
    subdomain: "newnew",
    createdAt: "2019-10-28T21:54:30.253Z",
    updatedAt: "2019-10-28T21:54:30.253Z"
  },
  </code></pre>
  
  <p>So, here is a CodeSandBox link: <a href="https://codesandbox.io/s/wonderful-thompson-vg2x1" rel="nofollow noreferrer">https://codesandbox.io/s/wonderful-thompson-vg2x1</a></p>
  
  <p>Here is the component itself:</p>
  
  <pre><code>export const CompanyTable = ({ companies }) =&gt; {
    const [sortedColumnData, setSortedColumnData] = useState({
      data: companySortData(companies, COLUMN_NAME.NAME), // swap this initial sorting with just the `companies` and this table works fine
      direction: DIRECTION.ASCENDING,
      columnName: COLUMN_NAME.NAME
    });
  
    const handleClick = clickedColumn =&gt; {
      if (!clickedColumn) return;
  
      if (sortedColumnData.columnName !== clickedColumn) {
        setSortedColumnData({
          data: companySortData(sortedColumnData.data, clickedColumn),
          columnName: clickedColumn,
          direction: DIRECTION.ASCENDING
        });
        return;
      }
  
      setSortedColumnData({
        data: sortedColumnData.data.reverse(),
        columnName: clickedColumn,
        direction:
          sortedColumnData.direction === DIRECTION.ASCENDING
            ? DIRECTION.DESCENDING
            : DIRECTION.ASCENDING
      });
    };
    return (
      &lt;Table celled selectable sortable&gt;
        &lt;Table.Header&gt;
          &lt;Table.Row&gt;
            {headerCells.map(cell =&gt; (
              &lt;Table.HeaderCell
                key={`cell-${cell.testid}`}
                sorted={
                  sortedColumnData.columnName === cell.clickHandlerText
                    ? sortedColumnData.direction
                    : undefined
                }
                data-testid={`header-${cell.testid}`}
                onClick={() =&gt; handleClick(cell.clickHandlerText)}
              &gt;
                {cell.title}
              &lt;/Table.HeaderCell&gt;
            ))}
          &lt;/Table.Row&gt;
        &lt;/Table.Header&gt;
        &lt;Table.Body data-testid="company-table-body"&gt;
          {sortedColumnData.data.map(
            ({ id, name, subdomain, createdAt, updatedAt }) =&gt; {
              return (
                &lt;Table.Row
                  key={id}
                  role="link"
                  data-testid={id}
                  style={{ cursor: "pointer" }}
                &gt;
                  &lt;Table.Cell singleLine&gt;{name}&lt;/Table.Cell&gt;
                  &lt;Table.Cell singleLine&gt;{subdomain}&lt;/Table.Cell&gt;
                  &lt;Table.Cell singleLine&gt;{createdAt}&lt;/Table.Cell&gt;
                  &lt;Table.Cell singleLine&gt;{updatedAt}&lt;/Table.Cell&gt;
                &lt;/Table.Row&gt;
              );
            }
          )}
        &lt;/Table.Body&gt;
      &lt;/Table&gt;
    );
  };
  </code></pre>
  
  <p>I am not sure why the re-rendering from setting state with the re-sorted array is failing...</p>