【React】React Performance

The actual contents comes from Epic React’s Advanced React Patterns Workshop.

If you have interests, you can check Epic React by Kent C. Dodds.

Code Splitting (Dynamic Import)

The module must have a React component as the default export, and we have to use the <React.Suspense /> component to render a fallback value while the user waits for the module to be loaded.

Load when Event Happened

We can also trigger an event to load the module we want.

webpack Magic Comments

If we’re using webpack to bundle, then we can use magic comments to have webpack instruct the browser to prefetch dynamic imports:

Then webpack will adds this to our document’s head:

Then the browser will automatically load this JavaScript file into the browser cache as soon as the browser no longer busy.

webpackChunkName

By using this, which will allow webpack to place common modules in the same chunk.

This is good for components which we want loaded together in the same chunk (to reduce multiple requests for multiple modules which will likely be needed together).

Web Workers

Web Workers are a browser standard that enables us to let browser spin up multiple threads to run different JavaScript files.

If some JavaScript that’s expensive to run, we can put it on the separate thread, so our main thread is more rapidly to user.

workerize-loader

It is a webpack loader for workerize which means we can put any module (and the modules that it imports) into a webworker.

The workerize! thing in the import statement is a webpack syntax to tell webpack to treat that module specially to pipe it through the workerize-loader.

The communication between Webworker and the browser’s main thread is asynchronous.

Performance with Large List

React is really optimized at updating the DOM during the commit phase.

Unfortunately, there’s not much React can do if you simply need to make huge updates to the DOM.

These problems come with than dataviz, grids, tables, and lists with lots of data.

Lazy Just-In-Time Rendering

The main idea is that we don’t need to actually display tens of thousands of list items, table cells, or data points to users.

If that content isn’t displayed, then we can doing some “lazy” just-in-time rendering.

react-virtual

Rather than iterating over all the items in your list, we tell useVirtual how many rows are in your list, give it a callback to determine what size they each should be, and then it will give us virtualItems and totalSize which we can then use to only render the items the user should be able to see within the window.

Context System

The way that context works is that whenever the provided value changes from one render to another, it triggers a re-render of all the consuming components (which will re-render whether or not they’re memoized).

Every time the <CountProvider /> is re-rendered, the value is brand new, so even though the count value itself may stay the same, all component consumers will be re-rendered.

The easy solution is to memoize the value provided to the context provider.