Node.js

class Node extends Component {
  componentDidMount() {
    this.queueUpdate()
  }

  componentDidUpdate() {
    this.queueUpdate()
  }

  queueUpdate = () => {
    const {
      dispatch,
      id,
    } = this.props

    this
    .timeoutId = (
      setTimeout(
        () => {
          dispatch(
            queueAction(
              updateNode(id)
            )
          )
        },
        getRandomTimeout(),
      )
    )
  }

  render() {
    const {
      color,
      value,
      x,
      y,
    } = this.props

    return (
      <div
        style={{
          color,
          left: `${x}ch`,
          position: 'absolute',
          top: `${y}em`,
        }}
      >
        {value}
      </div>
    )
  }
}

Nodes.js

class Nodes extends PureComponent {
  componentDidMount() {
    setInterval(
      this.updateNodes,
      40,
    )
  }

  updateNodes = () => {
    const {
      dispatch,
      queue,
    } = this.props

    queue
    .length > 0
    && (
      queue
      .forEach(dispatch)
    )
    && (
      dispatch(resetQueue())
    )
  }

  render() {
    const { nodes } = this.props
    
    return (
      nodes
      .map(({
        id,
      }) => (
        <Node
          id={id}
          key={id}
        />
      ))
    )
  }
}

nodesReducer.js

const initialState = generateNodes(1500)

const nodesReducerActions = {
  [UPDATE_NODE]: (
    nodes,
    {
      id,
      updatedValues,
    },
  ) => {
    const nodeIndex = (
      nodes
      .findIndex(({
        id: nodeId,
      }) => (
        nodeId === id
      ))
    )

    return (
      nodes
      .slice(0, nodeIndex)
      .concat({
        ...nodes[nodeIndex],
        ...updatedValues,
      })
      .concat(
        nodes
        .slice(nodeIndex + 1)
      )
    )
  },
}

queueReducer.js

const initialState = []

const queueReducerActions = {
  [RESET_QUEUE]: () => (
    initialState
  ),
  [QUEUE_ACTION]: (
    actions,
    { action },
  ) => (
    actions
    .concat(action)
  ),
}