I have modified the simple example in react-virtualized Grid as follows. While this code works, I have a two part question:

1. how do I modify the example so that on a timer callback, quoteChange will be called with random values.
2. If I modify the quoteList, will the Grid automatically update without calling cellRenderer ?

The code. The idea is to have an application that looks like it is displaying streaming real-time quotes. Note that quoteChange currently doesn't do anything. It is my feeble attempt at a first try.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';

// Grid data as an array of arrays
const quoteList = [
  ['GE', 100, 35.28, 35.30, 100, 95125],
  ['IBM', 100, 135.11, 135.20, 100, 195125],
  ['C', 100, 45.23, 45.30, 100, 195125]
];

function quoteChange(ri, bid, ask)
{
    quoteList[ri][2] = bid
    quoteList[ri][3] = ask

    var bi = {
        columnIndex : 2,
        rowIndex : ri,
    }

    cellRenderer(bi)

    var ba = {
        columnIndex : 3,
        rowIndex : ri,
    }

    cellRenderer(ba)
}

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {quoteList[rowIndex][columnIndex]}
    </div>
  )  
}

// Render your grid
ReactDOM.render(
  <Grid
    cellRenderer={cellRenderer}
    columnCount={quoteList[0].length}
    columnWidth={50}
    height={quoteList.length * 20}
    rowCount={quoteList.length}
    rowHeight={20}
    width={800}
  />,
  document.getElementById('root')
);

I have modified the simple example in react-virtualized Grid as follows. While this code works, I have a two part question:

1. how do I modify the example so that on a timer callback, quoteChange will be called with random values.
2. If I modify the quoteList, will the Grid automatically update without calling cellRenderer ?

The code. The idea is to have an application that looks like it is displaying streaming real-time quotes. Note that quoteChange currently doesn't do anything. It is my feeble attempt at a first try.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';

// Grid data as an array of arrays
const quoteList = [
  ['GE', 100, 35.28, 35.30, 100, 95125],
  ['IBM', 100, 135.11, 135.20, 100, 195125],
  ['C', 100, 45.23, 45.30, 100, 195125]
];

function quoteChange(ri, bid, ask)
{
    quoteList[ri][2] = bid
    quoteList[ri][3] = ask

    var bi = {
        columnIndex : 2,
        rowIndex : ri,
    }

    cellRenderer(bi)

    var ba = {
        columnIndex : 3,
        rowIndex : ri,
    }

    cellRenderer(ba)
}

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {quoteList[rowIndex][columnIndex]}
    </div>
  )  
}

// Render your grid
ReactDOM.render(
  <Grid
    cellRenderer={cellRenderer}
    columnCount={quoteList[0].length}
    columnWidth={50}
    height={quoteList.length * 20}
    rowCount={quoteList.length}
    rowHeight={20}
    width={800}
  />,
  document.getElementById('root')
);

• javascript
• reactjs
• timer
• callback
• react-virtualized

1 Answer 1

If I modify the quoteList, will the Grid automatically update without calling cellRenderer ?

No. This is mentioned at the beginning of the docs. ;)

Pure Components

By default all react-virtualized ponents use shallowCompare to avoid re-rendering unless props or state has changed. This ocassionally confuses users when a collection's data changes (eg ['a','b','c'] => ['d','e','f']) but props do not (eg array.length).

The solution to this is to let react-virtualized know that something external has changed. This can be done a couple of different ways.

Pass-thru props

The shallowCompare method will detect changes to any props, even if they aren't declared as propTypes. This means you can also pass through additional properties that affect cell rendering to ensure changes are detected. For example, if you're using List to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change. However you can pass through the additional sort property to trigger a re-render. For example:

<List
  {...listProps}
  sortBy={sortBy}
/>

Public methods

Grid and Collection ponents can be forcefully re-rendered using forceUpdate. For Table and List, you'll need to call forceUpdateGrid to ensure that the inner Grid is also updated.