getValue cache not invalidating when accessorFn is updated

TanStack Table version

v8.12.0

Framework/Library version

React v18.2.0

Describe the bug and the steps to reproduce it

When the accessorFn for a column is updated to return a new value, the new value is never displayed in the table. Through a sophisticated series of console.logs, I discovered that when getValue is called on the rerender, the new accessorFn is never called, presumably due to caching on column id.

The use case is a column that displays the name of the person for the current row. We want the user to be able to choose whether to display first or last name first (e.g. Tanner Linsley or Linsley, Tanner). We could just change the column id when the accessorFn is updated, but then we lose the current sort state for that column, ie if the table is currently sorted by name, we want to stay sorted by name after the name format is changed.

Steps to reproduce:

Define a column where the accessorFn returns a different value based on some piece of state
Update that piece of state
The values in the column don't change

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/tanstack-table-rnjqkx?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

I agree to follow this project's Code of Conduct
I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Any updates on this? I'm seeing the same issue where a piece of state changes the value returned by the accessorFn but the new value isn't being shown in the table

I found the same issue on my project. I suspect that the following code causes it

table/packages/table-core/src/core/row.ts

Lines 113 to 129 in 6d89e41

    
             if (row._valuesCache.hasOwnProperty(columnId)) { 
        
               return row._valuesCache[columnId] 
        
             } 
        
             const column = table.getColumn(columnId) 
        
             if (!column?.accessorFn) { 
        
               return undefined 
        
             } 
        
             row._valuesCache[columnId] = column.accessorFn( 
        
               row.original as TData, 
        
               rowIndex 
        
             ) 
        
             return row._valuesCache[columnId] as any 
        
           },

table/packages/table-core/src/utils/getCoreRowModel.ts

Lines 9 to 48 in 6d89e41

    
           memo( 
        
             () => [table.options.data], 
        
             ( 
        
               data 
        
             ): { 
        
               rows: Row<TData>[] 
        
               flatRows: Row<TData>[] 
        
               rowsById: Record<string, Row<TData>> 
        
             } => { 
        
               const rowModel: RowModel<TData> = { 
        
                 rows: [], 
        
                 flatRows: [], 
        
                 rowsById: {}, 
        
               } 
        
               const accessRows = ( 
        
                 originalRows: TData[], 
        
                 depth = 0, 
        
                 parentRow?: Row<TData> 
        
               ): Row<TData>[] => { 
        
                 const rows = [] as Row<TData>[] 
        
                 for (let i = 0; i < originalRows.length; i++) { 
        
                   // This could be an expensive check at scale, so we should move it somewhere else, but where? 
        
                   // if (!id) { 
        
                   //   if (process.env.NODE_ENV !== 'production') { 
        
                   //     throw new Error(`getRowId expected an ID, but got ${id}`) 
        
                   //   } 
        
                   // } 
        
                   // Make the row 
        
                   const row = createRow( 
        
                     table, 
        
                     table._getRowId(originalRows[i]!, i, parentRow), 
        
                     originalRows[i]!, 
        
                     i, 
        
                     depth, 
        
                     undefined, 
        
                     parentRow?.id 
        
                   )

Summary

getInfo function in row returns a cached value if it exists. (Probably) Cached values are not invalidated until the rows are removed from memory.
Each row is (re)built by createRow in getCoreRowModel. getCoreRowModel only depends on data, so rows are not (re)built by updating columnDefs.

I think there are some ways to fix the bug.

CoreRow manages accessorFn. If CoreRow detects difference between managed accessorFn and latest one, it
will invalidate cached data.
getCoreRowModel depends on data and columnDefs.

We had the same issue in our project. The suggested fix in #5582 fixes the issue for us. We've applied the fix with yarn patch until it is merged and released.

Any news on this ? We're having the same issue.

fix(table-core): clear row value caches when column defs are replaced

Navigation Menu

Repository navigation

`getValue` cache not invalidating when `accessorFn` is updated #5363

TanStack Table version

Framework/Library version

Describe the bug and the steps to reproduce it

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Terms & Code of Conduct

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (row._valuesCache.hasOwnProperty(columnId)) {
	return row._valuesCache[columnId]
	}

	const column = table.getColumn(columnId)

	if (!column?.accessorFn) {
	return undefined
	}

	row._valuesCache[columnId] = column.accessorFn(
	row.original as TData,
	rowIndex
	)

	return row._valuesCache[columnId] as any
	},

	memo(
	() => [table.options.data],
	(
	data
	): {
	rows: Row<TData>[]
	flatRows: Row<TData>[]
	rowsById: Record<string, Row<TData>>
	} => {
	const rowModel: RowModel<TData> = {
	rows: [],
	flatRows: [],
	rowsById: {},
	}

	const accessRows = (
	originalRows: TData[],
	depth = 0,
	parentRow?: Row<TData>
	): Row<TData>[] => {
	const rows = [] as Row<TData>[]

	for (let i = 0; i < originalRows.length; i++) {
	// This could be an expensive check at scale, so we should move it somewhere else, but where?
	// if (!id) {
	// if (process.env.NODE_ENV !== 'production') {
	// throw new Error(`getRowId expected an ID, but got ${id}`)
	// }
	// }

	// Make the row
	const row = createRow(
	table,
	table._getRowId(originalRows[i]!, i, parentRow),
	originalRows[i]!,
	i,
	depth,
	undefined,
	parentRow?.id
	)

getValue cache not invalidating when accessorFn is updated #5363

Description

TanStack Table version

Framework/Library version

Describe the bug and the steps to reproduce it

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Terms & Code of Conduct

Activity

badench commented on Mar 25, 2024

takoshi commented on May 20, 2024

andbjer commented on Sep 9, 2024

aliceprobstexternalairbus commented on Mar 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`getValue` cache not invalidating when `accessorFn` is updated #5363