The React Newsletter

tl;dr: lazy-load non-critical resources when a user interacts with UI requiring it

Your page may contain code or data for a component or resource that isn’t immediately necessary. For example, part of the user-interface a user doesn't see unless they click or scroll on parts of the page. This can apply to many kinds of first-party code you author, but this also applies to third-party widgets such as video players or chat widgets where you typically need to click a button to display the main interface.

Loading these resources eagerly (i.e right away) can block the main thread if they are costly, pushing out how soon a user can interact with more critical parts of a page. This can impact interaction readiness metrics like First Input Delay, Total Blocking Time and Time to Interactive. Instead of loading these resources immediately, you can load them at a more opportune moment, such as:

• When the user clicks to interact with that component for the first time
• Scrolls the component into view
• or deferring load of that component until the browser is idle (via requestIdleCallback).

The different ways to load resources are, at a high-level:

• Eager - load resource right away (the normal way of loading scripts)
• Lazy (Route-based) - load when a user navigates to a route or component
• Lazy (On interaction) - load when the user clicks UI (e.g Show Chat)
• Lazy (In viewport) - load when the user scrolls towards the component
• Prefetch - load prior to needed, but after critical resources are loaded
• Preload - eagerly, with a greater level of urgency

Docker is a containerization tool used to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services. It also helps to eliminate environment-specific bugs since you can replicate your production environment locally.

This tutorial demonstrates how to Dockerize a React app using the Create React App generator. We’ll specifically focus on-

1. Setting up a development environment with code hot-reloading
2. Configuring a production-ready image using multistage builds

This article is a mix of arguments, reality checks and a code solution at the end. Its focus: device (touch/desktop) driven code split in React with no backend.

Often the road leading to an actual implementation is long and bumpy - priorities, design, budget, colleagues with their own views, talking in different languages. These obstacles are challenging and usually take more energy to deal with than just coding. For that reason they deserve a separate preface here.

Jump to the code section, if this is what you are looking for, otherwise let’s continue.

It’s bloody hard to find a good example of a large production-grade, open-source React app.

There are a few reasons for this:

1. No one writes amazing code the first time they write it

   • Experienced product engineers know there’s a trade-off between quality and getting features in the hands of customers. You’re more likely to find ugly tech debt with a //TODO: Improve this later! comment than best practices

2. Most companies keep their apps in private repos

   • Trade secrets and all that jazz.

3. There’s a lot of beginner-grade repos out there

   • Without a ton of experience, it’s hard to tell the good from the bad

On that note, I’ve reviewed the following well-known open-source React apps, and reckon they’re worth checking out.

• Redux & React For Everyone
• Animating Svelte
• FullStack React with NextJS
• 🔥 Building React components with Storybook
• Level 2 React
• How to Build a GraphQL API