styledRanges updates only apply once, subsequent changes are ignored in v5

[mithun-jigsaw]

Describe the bug
When I update the styledRanges prop on a <ReactGrid> at runtime, the first assignment correctly highlights the cells, but any further updates to styledRanges have no effect.

Current behavior

1. Initial render: no highlights.
2. Click “Range 1” button → styledRanges is set to highlight cells (2,2)→(3,3) and it works.
3. Click “Range 2” button → styledRanges is set to a new range (1,2)→(2,3) but the grid does not update—old highlight remains and new one is never applied.

Expected behavior
Every time styledRanges changes, the grid should remove the previous highlight and apply the new range styling immediately.

Code

import React from "react";
import { ReactGrid, TextCell, Column, Cell } from "@silevis/reactgrid";
import { rgStyles } from "./utils/examplesConfig";

export const SampleGridExample = () => {
  const [styledRanges, setStyledRanges] = React.useState<any[]>([]);
  const columns: Column[] = [
    { colIndex: 0, width: 100 },
    { colIndex: 1, width: 100 },
    { colIndex: 2, width: 100 },
  ];
  const cells: Cell[] = [
    { rowIndex: 0, colIndex: 0, Template: TextCell, props: { text: "0-0" } },
    { rowIndex: 3, colIndex: 3, Template: TextCell, props: { text: "3-3" } },
    { rowIndex: 5, colIndex: 5, Template: TextCell, props: { text: "5-5" } },
  ];

  return (
    <>
      <button onClick={() =>
        setStyledRanges([{
          range: {
            start: { rowIndex: 2, columnIndex: 2 },
            end:   { rowIndex: 3, columnIndex: 3 }
          },
          styles: { background: "#FDF1F1", color: "#E94F4F" }
        }])
      }>Range 1</button>

      <button onClick={() =>
        setStyledRanges([{
          range: {
            start: { rowIndex: 1, columnIndex: 2 },
            end:   { rowIndex: 2, columnIndex: 3 }
          },
          styles: { background: "#FDF1F1", color: "#E94F4F" }
        }])
      }>Range 2</button>

      <ReactGrid
        id="test-grid"
        styles={rgStyles}
        enableColumnSelectionOnFirstRow
        rows={[]}
        columns={columns}
        cells={cells}
        styledRanges={styledRanges}
      />
    </>
  );
};

Your environment details

• Device: Desktop
• OS: Windows 11
• Browser: Chrome 136.0.7103.114
• React: 18.3.0
• @silevis/reactgrid: 5.0.0-alpha.11

[mithun-jigsaw]

Update / Root Cause
I dug into the code and found the issue in GridWrapper.tsx. The hook that applies styled ranges only watches styledRanges.length, so if you swap in a new array of the same length, the effect never runs again:

useEffect(() => {
  const css = getStyledRangesCSS(store.getState(), styledRanges);
  if (css) setCSS(css);
}, [styledRanges.length]);  //  dependency only on length

Suggested fix
Change the dependency to the full array so React re-runs the effect on any change:

useEffect(() => {
  const css = getStyledRangesCSS(store.getState(), styledRanges);
  if (css) setCSS(css);
}, [styledRanges]);