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!

[amasen02]

There are two interconnected reasons this bug is occurring: what triggers the window-focus re-render, and why that re-render destroys your active input values.

---

1. What triggers the re-render on window focus?

If your page fetches data using SWR, TanStack Query (React Query), or a Next.js client-side router listener, they enable window-focus revalidation by default:

• SWR: revalidateOnFocus: true (default)
• TanStack Query: refetchOnWindowFocus: true (default)

Whenever you switch tabs or click back into the browser window, a background fetch is dispatched. When the server response resolves, the parent page component re-renders with fresh data.

---

2. Why does that re-render wipe out the input values?

Normally, a parent re-render does not reset the local useState of an <input> if the component tree remains stable. However, two structural issues in your code force React to destroy and remount the inputs:

Cause A: GetRow is defined inside DataTable

Because function GetRow is declared inside the body of DataTable, a new component identity is created on every single render. To React's reconciliation engine, <GetRow /> is an entirely different component type on every render cycle. React tears down the old DOM node, unmounts <ProductInput>, and mounts a brand-new instance from scratch. When <ProductInput> mounts, useState((prod as any)[field]) resets to whatever the server initially passed.

Cause B: Unmemoized Columns function call

If your parent component calls columns={Columns(prods)} directly in its render method:

// ❌ WRONG: Creates a new array reference on every parent render
<DataTable columns={Columns(prods)} data={data} />

Because columns is a new reference every render, useReactTable recomputes the entire column and row models, which also invalidates cell renderers.

---

How to Fix It

Step 1: Inline or move GetRow outside DataTable

Eliminating the nested component definition stops React from remounting the row and input tree on re-renders:

// In data-table.tsx, inline the row rendering directly:
<TableBody className="!bg-transparent rounded-b-[8px]">
  {table.getRowModel().rows?.length ? (
    table.getRowModel().rows.map((row) => {
      const link = linkFn ? linkFn(row) : undefined;
      let bg = '';
      if (colorRow) {
        const { fn, color } = colorRow;
        if (fn(row)) bg = color;
      }

      return (
        <TableRow
          key={row.id}
          className={`h-11 ${link ? 'hover:cursor-pointer' : ''}`}
          onClick={() => 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>
      );
    })
  ) : (
    <TableRow>
      <TableCell colSpan={columns.length} className="h-24 text-center mc5:h-14">
        {t('no-results')}
      </TableCell>
    </TableRow>
  )}
</TableBody>

Step 2: Memoize columns in the parent component

Ensure the columns array preserves reference equality across re-renders:

// In your parent component:
const columns = useMemo(() => Columns(prods), [prods]);

return <DataTable columns={columns} data={data} />;

Step 3: Disable window-focus refetching while editing (Optional but Recommended)

If you are using React Query or SWR for the table data, disable focus refetching on that query so uncommitted edits aren't interrupted:

• TanStack Query:

  const { data } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
    refetchOnWindowFocus: false, // Prevents background query refresh while typing
  });

• SWR:

  const { data } = useSWR('/api/products', fetcher, {
    revalidateOnFocus: false,
  });

Once GetRow is moved out of the render loop and columns is wrapped in useMemo, React will preserve the DOM inputs across any parent re-renders and window focus events.