Request to be able to cache to row object from custom renderCell component

[zachsa]

Use case

I would like to be able cache to rows from within custom renderCell components. For example:

renderCell: ({ row }) => {
  const { id, _calc_status } = row
  const [state, setState] = useState({..., loading: true, status: _calc_status})

  useEffect(() => {
    async function init() {
      if (_calc_status) return
      const res = await fetch(...) // actually await dataLoader.load(id) because I know not to fire off hundreds of separate requests
      const status = res.etc.etc.
      setState(state => ({...state, status, loading: false}))
      row = {...row, _calc_status: status}
    }
    init()
  }, [id])

  return (
    <Div
      sx={{
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-start',
        alignContent: 'center',
      }}
    >
      {state.loading ? <CircularProgress size={12} /> : state.status}
    </Div>
  )
}

Proposed solution

Please let me know if there is a good way to do this already - I don't think I want to reset the whole rows array, but setting row doesn't seem to work.

The above actually works (without setting row, in that I can performantly used cached values set in the state). But the values in the cell don't display quite as smoothly as other columns - if i scroll fast then the values appear slightly late.

I think this is because rows outside outside of the virtualized area are pre-rendered based on key? (so in other words for these rows the render key will never have data). Or, at least this isn't a problem if I disable virtualization

Aside from the very minor UI glitch when rendering rows using my current approach, if I could cache onto rows then I would (I hope) be able to sort on this column using the cached value