LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Client Row Source

Client Row Data

Client row data is an array of rows fully loaded in the browser. This guide outlines the key considerations for working with client row data.

Data Property

Use the data property in the useClientDataSource hook to provide the raw data for creating rows in the client data source. The example below shows a basic configuration.

Client Data Setup

Fork code on stack blitzFork code on code sandbox

Updating Data

LyteNyte Grid’s useClientDataSource derives the view from the data you provide. This means that changes to the data value you pass to the hook will update the rows in the grid.

useClientDataSource updates row nodes when the data changes and creates new nodes only for rows that changed. Update efficiently by passing a new data array that keeps unchanged rows and replaces only the modified ones.

The demo below shows direct data updates. Every second, it randomly updates a subset of visible rows.

Direct Data Updates

Fork code on stack blitzFork code on code sandbox

To create the ticking data, the demo stores the data in React state and updates it every second by calling setData with a new data set, as shown below.

export default function ClientDataDemo() {
  const [data, setData] = useState(initialData);
  const ds = useClientDataSource({ data: data });


  useEffect(() => {
    const interval = setInterval(() => {
      setData((prev) => tickDexData(prev));
    }, 1000);


    return () => clearInterval(interval);
  }, []);


  // Component
}

LyteNyte Grid updates only the changed rows, making it highly efficient for large-scale data updates. In testing, the grid handles over 10,000 updates per second, even with filtering and grouping enabled. Still, you should optimize row updates. Frequent updates can trigger unnecessary work. Consider these tips:

  • Perform Delta Updates: If possible, reuse unchanged row objects in your data array instead of creating new object references for every row. This lets LyteNyte Grid detect which rows changed and create new row nodes only for those rows.

  • Batch Update Row Data: LyteNyte Grid can handle updates with millisecond-level precision, imperceptible to humans. Batching updates to your row data into intervals of 200 milliseconds to a few seconds reduces render churn and improves performance.

Next Steps