use-flash-cells

Never write a DIY price-flash loop again.

Headless React hook that tracks which cells in a data table changed value and exposes 'up' | 'down' | null flash direction per cell — drops in alongside MUI DataGrid, TanStack Table, react-data-grid, or any other renderer in under 5 lines.

Why this exists

Every financial table — price grids, order books, portfolio views — needs to flash cells green (value up) or red (value down) when live data arrives. This pattern is so standard it has its own name in trading UI: price flash.

None of the most popular React table libraries support it composably for the stacks most teams actually use:

| Library | Status | Evidence | |---|---|---| | MUI DataGrid (2.4 M weekly downloads) | ❌ Maintainers tell users to DIY | #9748, #8826 | | TanStack Table (headless) | ❌ No value-change state at all | by design | | adazzle/react-data-grid | ❌ Cell highlight is DIY | #680 | | AG Grid | ✅ enableCellChangeFlash | only if you commit to AG Grid for everything |

The only dedicated package, @lab49/react-value-flash, wraps a single number in a component. It has no concept of a table, no row/field addressing, no rowId/field coordination, and its last release was December 2022 (13 stars, effectively abandoned).

use-flash-cells fills the gap: one headless hook that tracks your whole dataset, diffs previous vs. current values per cell, and returns 'up' | 'down' | null — usable with any renderer.

Install

npm install use-flash-cells
# or
yarn add use-flash-cells
# or
pnpm add use-flash-cells

Peer dependency: react >= 16.8
Runtime dependencies: none
Bundle size: < 1 KB gzipped

Demo

Open demo/index.html in a browser — no build step required.

It simulates a live price feed across 6 ticker symbols and flashes cells in real time using the same logic as the hook. Use ▶ Start feed to stream ticks at 400 ms intervals, ⚡ Tick once to step manually, and the duration slider to see how different flash durations feel.

Quick start

import { useFlashCells } from 'use-flash-cells'

const { getFlash } = useFlashCells(rows, {
  keyField: 'id',                     // uniquely identifies each row
  fields: ['price', 'bid', 'ask'],    // numeric fields to watch
  duration: 600,                      // ms flash stays visible (default: 600)
})

// In any cell renderer:
const dir = getFlash(row.id, 'price') // → 'up' | 'down' | null

Usage

MUI DataGrid

MUI's own maintainers have closed two separate requests for this feature with "you should have all the pieces to implement that functionality" (#9748, #8826). use-flash-cells is those pieces, assembled.

import { useFlashCells } from 'use-flash-cells'
import { DataGrid, GridColDef } from '@mui/x-data-grid'

interface Tick {
  symbol: string
  price: number
  bid: number
  ask: number
}

function PriceGrid({ rows }: { rows: Tick[] }) {
  const { getFlash } = useFlashCells(rows, {
    keyField: 'symbol',
    fields: ['price', 'bid', 'ask'],
    duration: 600,
  })

  const columns: GridColDef<Tick>[] = [
    { field: 'symbol', headerName: 'Symbol', width: 100 },
    {
      field: 'price',
      headerName: 'Price',
      width: 120,
      renderCell: ({ row, value }) => {
        const dir = getFlash(row.symbol, 'price')
        return (
          <span
            style={{
              background:
                dir === 'up'   ? '#d4f7d4' :
                dir === 'down' ? '#f7d4d4' : 'transparent',
              transition: 'background 0.3s ease',
              display: 'block',
              width: '100%',
              padding: '0 8px',
            }}
          >
            {value}
          </span>
        )
      },
    },
  ]

  return <DataGrid rows={rows} columns={columns} getRowId={r => r.symbol} />
}

TanStack Table

import { useFlashCells } from 'use-flash-cells'
import {
  createColumnHelper,
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table'

interface Tick { id: string; price: number; volume: number }

function PriceTable({ data }: { data: Tick[] }) {
  const { getFlash } = useFlashCells(data, {
    keyField: 'id',
    fields: ['price', 'volume'],
  })

  const columnHelper = createColumnHelper<Tick>()
  const columns = [
    columnHelper.accessor('price', {
      cell: ({ row, getValue }) => {
        const dir = getFlash(row.original.id, 'price')
        return (
          <span className={dir ? `flash flash--${dir}` : undefined}>
            {getValue()}
          </span>
        )
      },
    }),
  ]

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <table>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

CSS to go with the className approach:

.flash { transition: background 0.3s ease; }
.flash--up   { background: #d4f7d4; }
.flash--down { background: #f7d4d4; }

adazzle/react-data-grid

import { useFlashCells } from 'use-flash-cells'
import DataGrid from 'react-data-grid'

function PriceGrid({ rows }: { rows: Tick[] }) {
  const { getFlash } = useFlashCells(rows, {
    keyField: 'id',
    fields: ['price'],
  })

  const columns = [
    {
      key: 'price',
      name: 'Price',
      renderCell: ({ row }: { row: Tick }) => {
        const dir = getFlash(row.id, 'price')
        return (
          <span style={{ color: dir === 'up' ? 'green' : dir === 'down' ? 'red' : 'inherit' }}>
            {row.price}
          </span>
        )
      },
    },
  ]

  return <DataGrid rows={rows} columns={columns} />
}

API

useFlashCells(data, options)

import { useFlashCells } from 'use-flash-cells'

function useFlashCells<T>(
  data: T[],
  options: {
    keyField: keyof T              // field that uniquely identifies each row
    fields: ReadonlyArray<keyof T> // numeric fields to watch; accepts as const arrays
    duration?: number              // ms flash stays visible — default: 600
  }
): {
  getFlash: (rowId: string | number, field: keyof T) => FlashDirection
}

FlashDirection

import type { FlashDirection } from 'use-flash-cells'

type FlashDirection = 'up' | 'down' | null

Behaviour guarantees

| Scenario | Result | |---|---| | First render | All cells return null — no previous snapshot to compare | | Value increases | 'up' | | Value decreases | 'down' | | Value unchanged | null | | New row appears | null — only flashes on the next change | | Rapid updates to same cell | Timer resets — full duration ms after the latest change | | Unmount | All pending timers cancelled | | No actual value changes | Zero setState calls — no wasted re-renders | | Field value is undefined / non-numeric | null — NaN-safe comparison prevents spurious flashes | | Row removed mid-flash | No crash — pending timer clears gracefully |

Styling recipes

getFlash returns a plain string — use it however fits your design system:

// Tailwind
<td className={dir === 'up' ? 'bg-green-100' : dir === 'down' ? 'bg-red-100' : ''} />

// CSS Modules
<td className={dir ? styles[`flash_${dir}`] : ''} />

// CSS variables
<td style={{ '--flash-bg': dir === 'up' ? '#d4f7d4' : dir === 'down' ? '#f7d4d4' : 'transparent' } as React.CSSProperties} />

// Inline
<td style={{ background: dir === 'up' ? '#d4f7d4' : dir === 'down' ? '#f7d4d4' : '' }} />

Non-goals

This is flash-state tracking only. It deliberately does not include:

• No rendering — returns state only; you own the DOM.
• No styles — nothing injected; bring your own CSS.
• No formatting — pair with Intl.NumberFormat or currency.js.
• Not a table component — composes with whatever you already use.
• No data fetching / WebSocket — you supply the data, the hook diffs it.

Comparison

| | use-flash-cells | @lab49/react-value-flash | AG Grid built-in | |---|---|---|---| | Table-level (all rows/fields) | ✅ | ❌ single cell only | ✅ | | Headless / renderer-agnostic | ✅ | ❌ React component | ❌ AG Grid only | | Works with MUI DataGrid | ✅ | ⚠️ manual wrap per cell | ❌ | | Works with TanStack Table | ✅ | ⚠️ manual wrap per cell | ❌ | | Actively maintained | ✅ | ❌ last release Dec 2022 | ✅ | | Zero runtime dependencies | ✅ | ❌ | ❌ | | Bundle size | < 1 KB gz | ~3 KB gz | ~300 KB+ |

Reproduce the results

git clone https://github.com/RomanFedytskyi/use-flash-cells
cd use-flash-cells
npm ci
npm run typecheck   # tsc --noEmit
npm test            # vitest: 30 tests (13 unit + 17 stress/edge-case)
npm run build       # tsup → dual ESM + CJS + .d.ts

CI matrix: Node 18 / 20 / 22.

Contributing

Bug reports and pull requests are welcome. Please open an issue before sending a large PR.

License

MIT — see LICENSE.