thumbor VS react-virtualized

- Image transformations | Again, use Do's $5 droplet. Install thumbor.org .Enjoy!

This is not a feature native to Cloudfront, it is something you need a dedicated service or function for. This aws blog article demonstrates a method using CloudFront Lambda@edge with a lambda that handles the image resize. Years ago before lambda@edge existed, I used an open source project thumbor behind CloudFront to handle this.

So I found this project: Thumbor This service is self-hosted, and It allows on-demand cropping, resizing, applying filters and optimizing images. It works incredibly fast and does not require a lot of resources. Take a look, and you will understand how it works.

Images - ideally use webp format, and keep images as small as possible by loading in only what you need in terms of resolution. Ie, if user is on mobile, and image is displayed in ie 320x160, don't load huge image for desktop and resize it in-browser. This can be achieved by tools like Thumbor.

You will need Thumbor to use this method. If you're unfamiliar with Thumbor then I wrote an introduction here.

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