title: React-table data flow between outside and inside of hooks.visibleColumns.push invocation
body: <p>I would like to create an array outside <code>useTable</code> invocation, manipulate the array, and based on the array state make checkbox checked or unchecked. After each click on a button, length of the array is increased by adding one element to the array. When length become greater than 3, the <code>input</code> should be checked.</p>
  <p>The problem is that the array state is different inside and outside <code>checked</code> attribute of <code>input</code>. Outside it works as expected: the array length increases. Inside, the array length is equal to initial length of 0.</p>
  <p>I have attached code with some logging. I think that the relevant part probably ends with the end of <code>useTable</code> invocation (then is some code which I took from <code>react-table</code> docs with button and mock data, columns added). What changes should I introduce to the code to make it work as I expect?</p>
  <pre><code>import React, { useMemo, useState } from 'react';
  import { useTable } from 'react-table'
  
  function Table({ columns, data }) {
  
    // neither stateArr nor simpleArr help reach what I would like to
    const [stateArr, setStateArr] = useState([]);
    let simpleArr = [...stateArr];
  
    const handleOnButtonClick = () =&gt; {
      console.log(&quot;Outside checked: simpleArr, stateArr&quot;);
      console.log(simpleArr);
      console.log(stateArr);
      setStateArr([...stateArr, 1]);
      // in this case unnecessary, since, as I understand, simpleArr is rendered and (re)assigned above
      // simpleArr = [...stateArr];
    };
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = useTable({
      columns,
      data,
    },
    (hooks) =&gt; {
      hooks.visibleColumns.push((columns) =&gt; {
        return [
          {
            id: 'checkedInputs',
            Header: () =&gt; {
              return (&lt;div&gt;
                &lt;input type=&quot;checkbox&quot;
                     // working, not most elegant way to combine logging and computing boolean
                     checked={console.log(&quot;Inside checked: simpleArr, stateArr&quot;) || console.log(simpleArr)
                       || console.log(stateArr) || simpleArr.length &gt; 3 || stateArr.length &gt; 3} /&gt;
              &lt;/div&gt;);
            },
            Cell: () =&gt; {
              return (&lt;div&gt;R&lt;/div&gt;);
            },
          },
          ...columns,
          ];
      });
    }
    );
  
    return (
      &lt;div&gt;
      &lt;table {...getTableProps()}&gt;
        &lt;thead&gt;
          {headerGroups.map(headerGroup =&gt; (
            &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
              {headerGroup.headers.map(column =&gt; (
                &lt;th {...column.getHeaderProps()}&gt;{column.render('Header')}&lt;/th&gt;
              ))}
            &lt;/tr&gt;
          ))}
        &lt;/thead&gt;
        &lt;tbody {...getTableBodyProps()}&gt;
          {rows.map((row, i) =&gt; {
            prepareRow(row)
            return (
              &lt;tr {...row.getRowProps()}&gt;
                {row.cells.map(cell =&gt; {
                  return &lt;td {...cell.getCellProps()}&gt;{cell.render('Cell')}&lt;/td&gt;
                })}
              &lt;/tr&gt;
            )
          })}
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button type=&quot;button&quot; onClick={handleOnButtonClick}&gt;Click Me!&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  
  function App() {
    const columns = useMemo(
      () =&gt; [
        {
          Header: 'Animal Type',
          accessor: 'animalType',
        },
        {
          Header: 'Number of legs',
          accessor: 'numberOfLegs',
        },
      ],
      [],
    );
  
    const data = useMemo(
      () =&gt; [
        {
          animalType: 'dog',
          numberOfLegs: 4,
        },
        {
          animalType: 'snake',
          numberOfLegs: 0,
        },
      ],
      [],
    );
  
    return (
      &lt;Table columns={columns} data={data} /&gt;
    )
  }
  
  export default App;
  </code></pre>