TanStack table causes weird re-render on window focus and resets cell input values to their old values

[kNicu]

I created my own data-table.tsx component that uses shadcn's and tanstack's table components. The table works fine, up until I discovered a very strange and infuriating bug, which is, when I write a value inside of a cell component and i refocus the window, the whole component re-renders for no known reason. I have tried to replace the custom input with a simple input, without any other events besides onChange, but no luck.
I have no idea what is causing this re-render but any help is greatly appreciated.

Below are the components at fault:

-- data-table.tsx

'use client'
import React, { useEffect, useState } from "react"
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getPaginationRowModel,
  Row,
} from "@tanstack/react-table"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button as PageButton } from "@/components/ui/button"
import { MdOutlineNavigateNext } from "react-icons/md"
import { MdOutlineNavigateBefore } from "react-icons/md"
import { useTranslations } from "next-intl"
import useChangeParams from "@/app/useChangeParams"
import { setProps } from "@/app/interfaces"
import { useRouter } from "@/i18n/config"



interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[],
  page: number,
  totalPages: number
  children?: React.ReactNode
  selected?: number[]
  setSelected?: setProps<number[]>
  pageSize?: number
  totalItems: number
  hideBottom?: boolean
  className?: string
  headerClass?: string
  linkFn?: (row: Row<TData>) => string | undefined
  textCenter?: boolean
  hiddenCols?: string[]
  colorRow?: {
    fn: (row: Row<TData>) => boolean
    color: string
  }
}

export function DataTable<TData, TValue>({ columns, data, page, hideBottom, totalPages, setSelected, pageSize: pgSize, totalItems, className, headerClass, linkFn, textCenter, hiddenCols, colorRow }: DataTableProps<TData, TValue>) {
  const [rowSelection, setRowSelection] = useState({})
  const pageSize = pgSize ?? 20
  const router = useRouter()
  const columnVisibility = !!hiddenCols?.length ? JSON.parse(
    `{${hiddenCols.map(col => (`"${col}": false`)).join(',')}}` 
  ) : {}

  useEffect(() => {
    if (!!setSelected) {
      setSelected(table.getSelectedRowModel().rows.map(row => ((row.original as any).id)))
    }
  }, [rowSelection])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onRowSelectionChange: setRowSelection,
    state: {
      rowSelection,
    },
    initialState: {
      pagination: {
        pageSize: pageSize
      },
      columnVisibility: columnVisibility,
    },
  })
  const rowColor = '#FFFFFF'
  const t = useTranslations("DataTable")
  const changeParams = useChangeParams()

  function getPages() {
    const pagesShown = 2
    let startPage = Math.max(0, page - 2)
    let endPage = Math.min(totalPages - 1, page + pagesShown)
    
    // if we are at the start
    if (startPage < 2) {
      endPage = Math.min(totalPages - 1, Math.min(3, page + pagesShown - startPage))
    }
    // if we are in the middle
    if (endPage + 2 > totalPages - 1) {
      startPage = Math.max(0, page - 1)
      endPage = Math.min(totalPages - 1, startPage + pagesShown)
    }

    if (endPage >= totalPages - 1) {
      startPage = totalPages - pagesShown - 1
      endPage = totalPages - 1
    }

    let pageButtons: any = []
    if (startPage !== 0) {
      pageButtons.push(<button className="w-fit h-fit" key={`page-button-${0}`} onClick={() => changeParams({
        key: 'page',
        val: 0
      })}>
        <div className={`w-7 h-6 p-1 text-[#6F6F6F] text-sm leading-[1rem] text-center `} key={`page-${1}`}>
          <span>{ 1 }</span>
        </div>
      </button>)
    }
    for (let i = startPage; i <= endPage; i++) {
      let divClass = ""
      const currPage = i + 1
      if (page === currPage) {
        divClass = "bg-[#F6F6F6] rounded-[2px]  border-[#F6F6F6] shadow-sm"
      }
      pageButtons.push(<button className="w-fit h-fit" key={`page-button-${i}`} onClick={() => changeParams({
        key: 'page',
        val: currPage
      })}>
        <div className={`size-7 ${divClass} text-sm leading-[1rem] border border-transparent text-center rounded-[6px]`} key={`page-${i}`}>
          <p className="mt-1.5">{ currPage }</p>
        </div>
      </button> )
    }
    if (pageButtons.length <= 1) {
      pageButtons = <></>
    }
    return pageButtons
  }

  

  return (
    <div>
      <div className={className + " flex flex-col gap-4 h-fit shadow-lg rounded-[8px]"}>
        <div className="relative shad-table border rounded-[8px] overflow-x-auto">  
          <Table className="rounded-[8px]">
            <TableHeader className={headerClass + " bg-[#FAFAFA] text-[#6F6F6F]"}>
              {table.getHeaderGroups().map(headerGroup => <TableRow key={headerGroup.id} className="bg-[let(--light-brown)] hover:bg-[let(--light-brown)]">
                {headerGroup.headers.map(header => <TableHead key={header.id} className="text-sm font-medium text-[#6F6F6F] py-1 px-7 mc5:px-2">
                  {flexRender( 
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                  </TableHead> ) }
              </TableRow>
              )}
            </TableHeader>
            <TableBody className="!bg-transparent rounded-b-[8px]">
              {table.getRowModel().rows?.length ? table.getRowModel().rows.map(row => <GetRow row={row} key={row.id}/>) : <TableRow> 
                <TableCell colSpan={columns.length} className="h-24 text-center mc5:h-14">
                  { t('no-results') }
                </TableCell>
              </TableRow> }
            </TableBody>
          </Table>
        </div>
      </div>
      { !hideBottom && <div className="flex items-center justify-between mc5:flex-col">
        <div className="mt-5 ml-1 mc5:text-sm text-center mc5:order-2 mc5:mt-1 mc5:ml-0">
          { t('showing', {
            from: table.getRowModel().rows.length,
            to: pageSize,
            total: totalItems
          }) }
        </div>
        
        <div className={`flex justify-end items-center pr-5 mc5:pr-0 ${table.getPageCount() > 0 ? 'opacity-100 h-fit' : 'opacity-0 hidden'} transition-opacity`}>
          {/* { table.getRowModel().rows.length < data.length && <p className="text-gray-500 text-sm"></p> } */}
          { totalPages > 1 && <div className="flex items-center justify-center space-x-2 py-4 w-fit">
            { (page > 1 && totalPages > 4) && <PageButton
              className="w-8 h-8 p-2 items-center align-middle !border-none bg-transparent shadow-none hover:bg-[#F6F6F6]"
              onClick={() => changeParams({key: 'page', val: page - 1})}
            >
              <MdOutlineNavigateBefore className="h-4 w-4" color="#1D2027" />
            </PageButton> }
            { getPages() }
            { (page + 2 < totalPages) && <PageButton
              className="w-8 h-8 p-2 items-center align-middle border-none bg-transparent shadow-none hover:bg-[#F6F6F6]"
              onClick={() => changeParams({key: 'page', val: page + 1})}
            >
              <MdOutlineNavigateNext className="h-4 w-4" color="#1D2027" />
            </PageButton> }
          </div> }
        </div>
      </div> }
    </div>
  )

  interface RowProps {
    row: Row<TData>
  }

  function GetRow({ row }: RowProps) {
    const link = linkFn ? linkFn(row) : undefined
    let bg = ''
    if (colorRow) {
      const { fn, color } = colorRow
      if (fn(row)) {
        bg = color
      }
    }
    
    return (
      <TableRow className={`h-11 ${!!link && 'hover:cursor-pointer'}`} onClick={() => {
        if (!!link) {
          router.push(link)
        }
      }}>
        {row.getVisibleCells().map((cell) => <TableCell key={cell.id} className={`text-sm ${rowColor} py-3 px-7 text-[#262A2A] mc5:px-2 mc5:text-xs ${textCenter && 'text-center'}`} style={{
          backgroundColor: bg
        }}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </TableCell>
        )}
      </TableRow>
    )
  }
}

Columns.tsx

import { CalcProd } from "@/app/interfaces";
import { ColumnDef } from "@tanstack/react-table";
import ProductInput from "./ProductInput";
import ProdRelation from "./ProdRelation";
import ProdActions from "./ProdActions";
import ProdCurr from "./ProdCurr";



export function Columns(
  prods: {id: number, name: string}[]
): ColumnDef<CalcProd>[] {
  return [
    {
      header: 'Denumire Produs',
      cell: ({row}) => <div className="[&>div]:!w-[200px]">
        <ProductInput field="name_client" prod={row.original} type="invoice" />
      </div>
    },
    {
      header: 'Descriere',
      cell: ({row}) => <div className="[&>div]:!w-[200px]">
        <ProductInput field="description" prod={row.original} type="invoice" />
      </div>
    },
    {
      header: 'Descriere TARIC',
      cell: ({ row }) => <div className="[&>div]:!w-[240px]">
        <ProductInput field="taric_desc" prod={row.original} type="invoice" />
      </div>,
      id: 'taric_desc'
    },
    {
      header: 'Produs asociat',
      cell: ({ row }) => <ProdRelation other_id={row.original.cds_id} prod_id={row.original.id} type="inv" prods={prods} />
    },
    {
      header: 'Cant.',
      cell: ({ row }) => <ProductInput field="qty" prod={row.original} type="invoice" inputType="price" />
    },
    {
      header: 'Preț unitar',
      cell: ({ row }) => <ProductInput field="price" prod={row.original} type="invoice" inputType="price" />
    },
    {
      header: 'Valoare',
      accessorKey: 'amount_and_postage'
    },
    {
      header: 'Transport',
      accessorKey: 'prod_postage'
    },
    {
      header: 'Valută',
      cell: ({ row }) => <ProdCurr curr={row.original.curr} id={row.original.id}  />
    },
    {
      header: '(in RON)',
      accessorKey: 'amount_and_postage_ron'
    },
    {
      id: 'actions',
      cell: ({ row }) => <ProdActions id={row.original.id} skip_calc={row.original.skip_calc} />
    }
  ]
}

ProductInput.tsx

import { allowRole, fetchRole } from '@/app/functions'
import { CalcProd, CDSProduct, InvoiceProduct } from '@/app/interfaces'
import useSession from '@/app/useSession'
import InputLabel from '@/components/forms/InputLabel'
import { useRouter } from '@/i18n/config'
import React, { useState } from 'react'


interface Props {
  prod: CDSProduct | InvoiceProduct | CalcProd
  field: keyof CDSProduct | keyof InvoiceProduct | keyof CalcProd
  type: 'cds' | 'invoice'
  inputType?: string
}

function ProductInput({ prod, field, inputType, type }: Props ) {
  const [val, setVal] = useState((prod as any)[field])  
  const [changed, setChanged] = useState(false)
  const session = useSession()
  const router = useRouter()

  async function handleSubmit() {
    if (val !== (prod as any)[field] && changed) {
      const res = await fetchRole(session, '/admin/update-product', JSON.stringify({
        id: prod.id,
        val: val,
        field: field,
        type: type,
        awb_id: prod.awb_id
      }))
      if ((res.ok && ['price', 'qty', 'amount', 'val_tax', 'country_tax'].includes(field)) || !res.ok) {
        router.refresh()
      }
      setChanged(false)
    }
  }
  
  let allowed = allowRole(session?.user.role, ['operator-customs', 'customs-main'])
  if (type === 'invoice' && ['price'].includes(field)) {
    allowed = allowed && !(prod as InvoiceProduct).skip_calc
  }

  return (
    <div>
      <InputLabel
        onChange={allowed ? (e) => {
          setVal(e.target.value)
          setChanged(true)
        } : undefined}
        readOnly={!allowed}
        value={val}
        onBlur={allowed ? handleSubmit : undefined}
        className='text-center !px-2 min-w-10'
        type={inputType}
      />
    </div>
  )
}

export default ProductInput

[BATCOH]

Creating components inside components (nested components) will cause React to throw away the state of those nested components on each re-render of their parent.

You are creating the GetRow component inside the DataTable component.
Therefore, it is recreated and remounted (not just rerendered) every time DataTable is rendered.

You can use some memoisation (const GetRow = useCallback(..., [])) here, but it would be more correct to move it outside.

For such cases, there is a react/no-unstable-nested-components rule for ESLint, which provides a more detailed description with reasons and examples.

[kNicu]

I tried your suggestion and I moved GetRow inside a different file, but to no avail. Eventually, I found the fix, for anyone else who has the problem:

const memoColumns = useMemo(() => columns({ curr: products_curr }), [products_curr])

memoizing the columns did the trick. Still unclear as to why this was happening, but alas, I found the fix. Thanks for the suggestion!