Skip to main content

Posts

Showing posts with the label performance

React Performance - react.lazy for component, large data loading, react-router-dom

  1. To address these problems, we setup route-based code splitting using the  react-loadable  npm package. We then moved to  React.lazy  and  Suspense   despite it not supporting server-side rendering at that time. We switched because there was now a built-in way to handle dynamic imports. 2. Rendering these items was putting a lot of strain on the browser and we saw a lot of  jank . To fix this, we used an npm module called  react-window  which provides a higher-order component that controls the rendering of long lists. It does not render items that are not immediately visible. It supports lazy loading, custom properties, and event handlers. This gave us list rendering at 60fps. https://www.apollographql.com/docs/react/pagination/core-api/ https://codesandbox.io/s/5wqo7z2np4?file=/src/App.js:0-2108 import React , { createRef , Fragment , PureComponent } from "react" ; import { FixedSizeList as List } from "react-window" ...