DEV Community: Isaque Igor

Tips for Faster React App

Isaque Igor — Thu, 18 Aug 2022 18:48:00 +0000

This is a list of tips and techniques you can implement in your React Application for better performance.

Virtualization or Windowing

You might occasionally need to show a sizable table or list with many rows. Rendering a large set of data will impact application's performance if we load every single item all at once. This could freeze or crash the browser especially in less powerful devices with more complex layouts.

In that case, Virtualization, or "windowing" will be a great solution. It's a technique to render only the items that are visible to the user.

The good news is that you do not have to implement this solution yourself you may use these popular windowing libraries like react window and react virtualized to your advantage.

Lazy Loading Components

Lazy loading is a great technique for optimizing and speeding up the render time of your application.
The idea of lazy loading is to load a component only when it's needed.

React comes bundled with the React.lazy API so that you can render a dynamic import as a regular component. So instead
of loading your regular component like this:

You can do it like this:

Dependency Optimization

One often overlooked aspect of software development is how much programmers rely on open source libraries and packages
for ready-to-use code.
Sometimes it is a little too much instead of writing code from scratch or even copying and pasting code from one program to another, some programmers still rely on what is called a dependency.
For example, the lodash library. Let's say we only need three of the 100 methods from the library. Having all extra methods in the final bundle is not optimal.
We may use lodash-webpack-plugin to remove unused function and customize a build for us, this will produce a smaller build of the library.
It's worth checking how much code you are actually utilizing from dependencies when optimizing the application bundle size also it is a good idea to monitor and remove dependencies that are no longer used.

Sometimes the best dependencies is no dependencies at all

Avoid Unnecessary Component Renders

unnecessary re-rendering react component is a common problem in react. When a component re-renders react will also re-render its child component by default. This will slow the app and make the user frustrated, and no one wants to use an app that is laggy and feel unresponsive.
To prevent this from happening functional components can use React.memo to ensure the component is only re-rendered when its props change.
class-based components can utilize React PureComponent to get the same effect.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

Keep state local instead of store

It is easy to get carried away and dumping most of the state of your application to state management libraries.
Keeping the state of the component locally is preferable and will always be faster than using a global store.

This may not hurt a desktop computer much, but a small mobile device will take an obvious performance hit.

So, before storing a state to the store always check if it can be avoided.

React fragments

React requires a surrounding container for every component. But after the React 16, it is no longer needed because of React Fragments.
Fragments avoid creating an extra unnecessary DOM Node which is good for memory. Every little nodes that we can save adds up easily making our React application cleaner and speedy.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Conclusion

I sincerely hope that providing you with this tips on React speed optimization served the objective of this post. You can accomplish amazing feats in terms of the speed of the React app if these tips are correctly put into practice.

Writing our own Hooks!

Isaque Igor — Wed, 19 Aug 2020 14:53:21 +0000

The undoubted advantage of React Hooks is how easily we can extract logic fragments into our Hooks. In this post, I will show you how to write your Hooks, what the rules are, and how to make your code better!
But first, Let me show you the real benefits of react Hooks:

Custom hooks are just functions and therefore easier to understand what they do.
No need to deal with this. It becomes a pain when binding functions when we need to use an event handler.
The syntax is much shorter, which means there is less chance of bugs.
The condition is more detailed. Instead of one big state object, we can have several small hooks and each work with its own state and our components use them all together. This way we avoid merging the new state with the old one and prevent unnecessary overwrites.

Custom React Hook

We follow the same rules for creating our own Hooks as for the built-in ones: each Hook name must begin with "use". Hook is a normal function, and inside it, we can call other functions! Thanks to this, the composition of many Hooks becomes extremely simple and does not require any complicated techniques. These are just the usual functions.

usePageTitle

Let's start with something simple: A hook that changes the title of the page to the given one.

It's a very simple, not to say naive implementation, but it does the job for sure. How to make your own hook out of it?

Then in the component, we will use it like this:

useDocumentTitle('My React hook');

Wow, that was easy, wasn't it? We created a normal function where we call hook and that's it, just like that.

Let's add something else, like restoring the original title when the component is unmounted:

Here, in the line marked with number 1, we write the existing one document.title to the reef.
Then in the second one useEffect we return the function that will be called only when unmounting the component and set it document.title to the original value stored in the ref.

usePrevious

Sometimes we need information about the previous value of given props. While there was no problem with this in classes, in functional components we have to take care of it ourselves:

In this case, we create an empty ref (1), return the previous value (2), and then write to the ref a new one (3). This is because it useEffect starts asynchronously.

Most often, however, instead of using it usePrevious, we can solve the same problem differently and more simply, by adding a given prop to the dependency table useEffect. Then React will compare the old and the new value for us!

useApi

What if ... We want fetch data from API using Hook? It's easy! Let's take code similar to the one in the Hooks and API article and replace it with our own Hook that we can use in many places in our application. The first approach looks like this:

As you can see it's not very good yet, but it works pretty well:

We can improve our Hook in two ways:

First, get rid of the logic responsible for retrieving data from the API - that is, it is something completely independent of React. We want to evoke just getData(…) that, and not worry about some res.json() or another similar thing. For example (simplifying):

The second fix would be to use useReducer to get rid of excess code from useEffect itself:

The code is much longer, but it also seems more readable to me, because the elements of independent logic have been separated from each other.

See, making your own React hooks is easier than you think. 😁

Trick for React Debugging

Isaque Igor — Wed, 29 Jul 2020 17:22:26 +0000

Do you want to see what's actually coming in from the props?

The JSON.stringify() creates a JSON string out of the props and you will see everything that's coming in from the routes.

The third argument of JSON.stringify(data, replacer, space) is the number of spaces to use for pretty formatting. That means, if you set 4 as your space parameter, the result would be more indented.

You will see something like this, on your page:

{
  "name": "Isaque Igor",
  "id": 1,
  "email" : "email@email.com",
  "roles": {
      "isDeveloper": true,
      "isAdmin": true
  }
}