• React

Keep these things in mind when building React applications

June 19, 2020 • 2 min read

Tips for building fast and maintainable React applications

When working with React, especially at work, there are a few things I keep in mind to help me build faster and more efficient React applications. Some of the points mentioned are especially useful for large applications. This list is ongoing and by no means meant to be exhaustive.

Reuse Stateful Logic

If you have stateful logic that can be shared by more than one component, creating a hook is a great way to make it reusable.


Not only that, but moving stateful logic to a hook allows you to test the logic independently. I have noticed this has made tests easier and less of a pain to write, helping my team and I achieve 100% test coverage on fairly complex hook implementations.

Avoid Large and Complex Components

In React, components are the building blocks of your User Interface(UI). They allow you to build complex UI by putting many components together. However, you can easily go down a path where a component becomes large, complex, and have so much going on that it gets confusing 😕. If you are testing your components, complexity and length of the tests will also increase the larger and more complex your component is.


Hooks are also a great way to avoid this situation as they allow you to move related code from your component into a separate function. I have followed a similar method before, reducing a component hundreds of lines long to about half the original size.

Dynamic Imports

Dynamic imports are useful in cases where you want to speed up the load time of your application and decrease memory usage. This is because this functionality allows you to have the source code of your module available on demand or have it loaded when a certain condition is met.


With React, you can apply this functionality by using React.lazy. This method will allow you create a lazy loaded component that is rendered on demand. Make sure to wrap this new component with Suspense ⬇️.

Suspense Component

The Suspense component allows you to specify a fallback component in case child components inside of it are still loading. Right now, the main usecase is with dynamic imports.

Example

A while back, I built a modal for previewing CSV data. The button to open to modal is rarely clicked, so this means you don't need the source code downloaded for it until the user clicks on the button to upload a CSV. Once they click on the button, a request is made to load the source code for the data. While the source code is being fetched, you can wrap the body of the modal with Suspense and provide a fallback of a skeleton or loading icon to the user. This will let them know that content is loading and they should wait.

Can you Memoize?

Memoization allows you to cache results of expensive calculations so they don't always have to be recomputed. React offers a useMemo hook which allows you to utilize the memoization technique to rerender a component or make an expensive calculation if the dependencies provided to this hook change.


Summary

If you are building React applications for your job or clients, definitely consider these points as they can help you optimize the application for your customers. Some of the points mentioned here will also make it easier for you or someone else to maintain the application in the long run.


Hope you found this post useful!