Dynamic Columns from Asynchronous Data

[david-j-park]

I have a use case where the columns in my table vary depending on the data retrieved from a server-side callback. Normally I would place that data request inside a useEffect() hook and update my component's state when the data is received. That seems to work with react-table, but all the documents talk about memoizing columns to improve performance. I'm seeing slowish render times with only a few hundred rows, so I suspect I'm not doing things the best way.

Is there a "right" way to handle this using useMemo?

My code looks like this:

function Leaderboard() {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);
    
  const tableInstance = useTable({
        columns, data
    });

  const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = tableInstance;

  useEffect(() => {
        axios.get('http://localhost:1337/standings/2')
            .then(res => {
                let cols = [
                    // ... fixed columns here
                ];
                /* column group for each puzzle */
                res.data.event.puzzles.forEach(v => {
                    cols.push({
                        Header: `Puzzle ${v.Sequence} (${v.Words})`,
                        columns: [
                            {
                                Header: 'Score',
                                accessor: `solves.${v.id}.score`
                            },
                            {
                                Header: 'Time',
                                accessor: `solves.${v.id}.time`
                            },
                            {
                                Header: 'Correct',
                                accessor: `solves.${v.id}.correct`
                            },
                            
                        ]
                    })
                })
                setData(res.data.entries);
                setColumns(cols);
            })
    }, []);

  return (
    <div>
    <table {...getTableProps} className="table">
          // ...additional table rendering
    </table>
    </div>
  )
}