Skip to main content

6 posts tagged with "React"

View All Tags

· Updated on · 12 min read

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.

· Updated on · 11 min read

React Developer Tools is a powerful Chrome extension that helps debug your React app. It analyzes your app's component tree structure along with the state and props of your components and provides a detailed analysis of each component's performance and rendering times.

Developed by Meta, the company behind the React library itself, this extension is a practical addition to your React workflow in a variety of scenarios:

  • Debugging your React app and verifying that a component is receiving the correct props and holding the correct state
  • Identifying the root cause of performance issues when some components are rendering slowly
  • Inspecting the context values passed to each of your components and checking that the global state is being correctly shared between them

If you're curious about how you can start using React DevTools to debug your app and improve its performance, this guide is for you. The article first looks at React DevTools in a little more detail and then demonstrates its utility through an example app.

· Updated on · 7 min read

React has gained significant popularity as a library for building UIs on the web. One of the main attractors to the library is its impressive browser performance, thanks to its implementation of a virtual DOM.

When working on small projects, you shouldn’t run into many issues. However, larger projects will typically have complex UI components, process more data, and generally have more moving parts. All of these factors can impact the performance of your app.

This article will help you understand what tools you have at your disposal to measure React performance. This can help you optimize Core Web Vitals metrics like Interaction to Next Paint.

· Updated on · 4 min read

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.