oz VS react-virtualized

This was a monthly meeting, focused on Oz by Christopher Small.

It will be a monthly meeting, focusing on Oz from a developer's point of view. We will dive into the code and learn how to extend it.

I've created a large table in my Reagent app. For each row, I've created a vega-lite plot via oz that only appears when hovering over a row like this: [:div [:div.label "Hover for plot"] [:div.hide [oz.core/vega-lite {:data ...}]]]

Anyone have experience with both MatPlotLib and Vega / Vega-lite? I like working in Clojure and am just about to do a bunch of data-viz.

I've only done a simple line chart so far, and I used this oz library for interfacing with Clojure and displaying results in the browser. [1]

One of the problems was lack of error messages. Not sure what part of the tooling was failing me there.

[1]. https://github.com/metasoarous/oz

FWIW it looks pretty like metasoarous/oz by u/metasoarous

You might look at Oz. It does a ton more than you are asking, but one of it's features is static site generation. It works from hiccup or markdown etc.

You may increase the rendering efficiency of tabular and huge list data by using the React Virtualized module. React apps perform better overall when the quantity of requests and DOM elements is limited. React Virtualized is comparable to many other tools; however, what sets it apart from the competition is the sheer volume of features and excellent upkeep.

17.react-virtualized

If you have been using React for awhile, you may have heard of the infamous virtualisation library react-window or it's predecessor react-virtualized

React Virtualized is a React library that helps you work with large lists and tabular data efficiently in React. It has more than 25K stars on GitHub and more than 2.5 million weekly downloads on NPM as of August 2023.

Use virtualization (e.g. react-virtualized) to prevent off-screen components from actually rendering.

Virtualization can be achieved using third-party libraries like react-window or react-virtualized. These libraries provide a way to render only the visible data and load more data as needed, resulting in faster application performance.

You can implement the same pattern on the web when dealing with large amount of data. There are some libraries for React that trivialize this, like https://github.com/bvaughn/react-virtualized

Oh, right. I totally forgot to mention that– but the idea of "less rendering" in this case seems less like a Suspense concern and more like a windowing concern. I've written a few libraries for that stuff (react-window and react-virtualized) although there are others that may fit your needs better. Their main focus is limiting what you're rendering to more or less only what's on the screen at any given point. Combine that with memoized filtering and I would imagine you're set.

I've used the InfiniteLoader from react-virtualized in combination with useInfiniteQuery from @tanstack/react-query and it was relatively painless.

Here’s a react library https://github.com/bvaughn/react-virtualized