Achieve great performance with this easy takes in React

Building large and complex react applications may lead us to pay attention to some details than other, for example, trying to implement low coupling solutions in order to gain more maintainability in the future is one of the hardest things to achieve and we put a lot of effort and thought into it, but, for performance must of the time is something that we don’t have in our mind all the time.

The reality here is having an React app with good performance maybe easy to achieve if we consider using the small techniques since the start, but, if we try to refactor all of these at the end can be a really pain in the a**

That’s why I encourage you to keep these in mind when you are going to implement a new feature into your React app:

• Importing lazy loading components or Code-Splitting:

Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. 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.

When We use React, most of the time our files will be bundled with tools like webpack or vite, as our app grows, so will our bundle and if we import everything at once, our app will take ages to load, that’s why We use techniques like code-splitting. Doing this in 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.

Sometimes, i tent to use React Lazy for lazy-loading routes, and, inside of those routes, i also lazy loads components that i don’t care if they are loaded at last.

Here for example, the first components that the user will see and interact first are not lazy loaded because i want them to be loaded as fast as it can, and the component that the user will interact the least are lazy loaded.

• Using webp format for images

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

• Rendering lists with Object.keys

In React, you can use the Object.keys() method to get an array of the keys in an object, which you can then use to render a list. Here's an example of how you could use it:

This would render a list like this:

Using Object.keys() to get an array of the keys in an object can be an optimal way to render a list of items in React because it allows you to use the built-in Array.prototype.map() method to create a new array of elements by iterating over the array of keys and creating a list item element for each key.

This can be more efficient than other approaches, such as using a for loop or for...in loop to iterate over the keys in the object and create the list items. It's also easier to read and write, since it uses functional programming constructs that are built into JavaScript.

Additionally, using the key prop in the list items allows React to optimize the rendering of the list by keeping track of which items have changed, added, or removed, rather than re-rendering the entire list whenever there is a change. This can improve the performance of your app, especially if the list is large or updates frequently.

• Use React Suspense

React Suspense is a new feature in React that makes it easier to manage the loading state of asynchronous data in your application. It allows you to “suspend” the rendering of a component tree until a certain condition is met, and display a fallback UI in the meantime.

Using React Suspense can be optimal because it allows you to declaratively specify the loading behavior of your application, rather than having to manually manage it through props and state. This can make your code easier to understand and maintain, since the loading logic is isolated in a single place rather than scattered throughout your components.

Additionally, React Suspense can improve the performance of your application by allowing you to load data in parallel and by avoiding the need to render intermediate loading states. This can result in a better user experience, especially on slow networks or devices.

Overall, React Suspense can help you build more efficient and user-friendly applications by making it easier to manage the loading state of asynchronous data.

• Use React Memo

useMemo is a hook in React that allows you to memoize the value of a function component. This means that the component will only be re-rendered if one of the dependencies has changed.

Using useMemo can be optimal in situations where the component has expensive calculations that do not need to be performed on every render, such as when rendering a large list or when making expensive API calls. By memoizing the value of the component, you can avoid unnecessary re-renders and improve the performance of your application.

Here’s an example of how you can use useMemo to memoize the value of a component:

In this example, the MyComponent component uses the useMemo hook to memoize the value of the computeExpensiveResult function. The component will only be re-rendered if the value of the props argument changes. This can improve the performance of the component by avoiding unnecessary re-renders.

I hope this helps! Let me know if you have any questions.

Hope you find some help in this post!