Deploy in Production Mode

If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

<aside> 📔 If using CRA then run npm run build. It will create a production build of your app in the build/ folder of your project which can be deployed.

</aside>

Code Splitting

Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

Bundling is great, but as your app grows, your bundle will grow too.

To avoid winding up with a large bundle, it’s good to get ahead of the problem and start “splitting” your bundle.

Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app.

Suspense

React Suspense is a feature in React that allows components to “suspend” rendering while they are waiting for something to happen, such as data to be fetched from an API or an image to be loaded.

Suspense allows developers to create a more seamless user experience by rendering a placeholder or fallback component while the component is waiting for the required data to be available.

General overview of how React Suspense works:

• A component that uses Suspense wraps a component that may need to “suspend” rendering in a Suspense component.
• The wrapped component throws a promise when it needs to suspend rendering.
• The Suspense component catches the promise and renders a fallback component while the promise is pending.
• When the promise resolves, the wrapped component is rendered with the required data.

Dynamic Import