5 posts tagged with "React"

React apps tend to slow down as they grow. Components re-render unnecessarily, bundles bloat, and interactions start to lag. The results are poor Core Web Vitals (especially Interaction to Next Paint), frustrated users, and a sluggish user experience.

While React apps are notable for performance issues, and there are now more lightweight alternatives for component-based applications (e.g., Preact, Lit, Solid, etc.), React also continues to add new performance features that expand the options for building fairly well-performing applications using this framework.

Soft navigation reporting is an experimental feature of Google’s Web Vitals initiative. It allows you to measure Core Web Vitals and other metrics for dynamic URLs in single page applications.

In this tutorial, we’ll look into how you can report Core Web Vitals from a React application to the console.

Suspense in React has been in development for several years. With the release of React 18, it's now mature enough to be used in production for data fetching and building server-side rendered applications. In this guide, you'll learn about Suspense and how you can take advantage of it to make your React applications more efficient.

Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive. This makes the user experience worse and causes a higher Interaction to Next Paint metric.

This article explains how to update components only when necessary, and how to avoid common causes of unintentional re-renders.

Bundle splitting allows you to delay loading resources until they are actually needed. And Webpack and React make it surprisingly easy!

In this article we'll take a React component that's not needed on every page and move it from the main bundle into a separate bundle that can be lazy loaded.