FlexRender Functional Component Tanstack React Table v8

Question

I am rebuilding a react-table to v8 where one cell is a functional component, which shows the status, based on the Id value.

My Status component is defined like this:

function Status({ id }) {
  const [status, setStatus] = useState("pending");
  useEffect(() => {
    getApi(`/status/${id}`).then((stat) => {
      setStatus(stat);
    });
  }, []);
  return status == "pending" ? (
    <p>Pending</p>
  ) : (
    <p>{status}</p>
  );
}

The column is defined like this:

columnHelper.accessor("id", {
      header: () => "Latest Status",
      cell: (info) =>  <Status id={info.getValue()} />

For rendering the cell I am using FlexRender

flexRender(cell.column.columnDef.cell,cell.getContext())

With this, I get only the "Pending" when the cell renders, the state on the component is not getting updated, even after the API provides the response.

I had the same concept on React-Table v7 using cell.render("Cell") and it works as expected.

Answer 1

flexRender is creating a new component instead of re-rendering it. I would suggest you wrap it under useMemo so that react keep track of the previously created reference or just try to implement your own logic like if cell.column.columnDef.cell is a react component or not and render it accordingly.