Performance Thinking on Front End (Reactjs)

Performance is a big word, which you can see everywhere which many layers as Front End, Back End, Infrastructures, Scalable, ... So for this article, I talk the performance thinking on Front End, especially ReactJS which one of the popular UI libraries nowadays.

Disclaimer: As mentioned above, Performance is a huge thing, the article bases on my knowledge and experience so it might not cover everything, feel free to correct me by adding the comment if I was wrong

Let's Performance Thinking as entire Application not only the benchmark

Nowadays you will hear new UI libraries or frameworks with better performance and impressive benchmark which make me have the feeling that libraries have racing about the performance but in the real world, the application is more complicated than only set the count...

References:

• krausest.github.io/js-framewor…
• javascript.plainenglish.io/javascript-…

To clarify, I wouldn't say benchmark is wrong, Benchmark is one of the factors to help us see how library performs on some scenarios but I would suggest that don't take it as the main reason to choose the library/frameworks because nowadays those popular libraries/frameworks have really good performance, most of the time we won't see different which libraries/frameworks should not us care about it.

One of the good things about ReactJS is they have Facebook's environment with billions of users for verification, they will see differences in their matrix performance good or bad after any releases which other libraries/frameworks might figure out the problem after one or two years hence it might be too late and might need to re-build entire libraries/frameworks, AngularJS version 1.xx is a good example.

Performance Thinking and Data Flow are close Friend

Most of the time, I see the reason performance issues or how to improve performance is data flow, the problem of how we manage our state management. When we have good data flow, it is automatic works pretty well because ReactJS is declarative UIs and they are really good at doing their jobs.

Example:

Designing Complicated Form which has a lot of components inside and we also need to collect all information user's selection to submit. At the same time we also re-fill it back when the user wants to edit hence declare defaultValue and value separately state to avoid re-render again. I can have another article in a more detailed Form and different ways how to implement it.ReactJS also has API useMemo, useCallBack to optimize performance so special scenarios but we optimize by moving state around. Here is a good article about it. overreacted.io/before-you-…

Performance Thinking and Caching, Graphql also are close Friend

Caching is hard, I would suggest that you don't need to implement it by yourself unless you have a strong reason. Otherwise, there are some good libraries supporting caching out of the box which you don't need to worry like

• React Query: react-query.tanstack.com
• ApolloGraphQL: www.apollographql.com/docs/react

GraphQL is an interesting topic which we can discuss in another article.

Hope everyone enjoys, I will plan the following topic with more detail and practical example if you guy wants.