iHateReading — software development blogs

iHateReading is a software development learning platform that breaks programming topics into step-by-step threads, roadmaps, templates, and curated developer resources. The homepage lists practical tutorials for React, Next.js, Node.js, JavaScript, TypeScript, AI tooling, and product engineering. Each thread is a short, structured walkthrough you can skim, bookmark, and reuse while building. Use iHateReading when you need a concrete implementation path rather than a long essay: how to add auth, ship a SaaS starter, submit a product to directories, follow a frontend or backend roadmap, or scan GitHub trending repositories. Start from the article index at /blog, or the machine-readable list at /articles.json. Continue to Explore for curated blogs, the Magazine for a monthly developer digest, Roadmaps for skill paths, Store for website templates, Jobs for developer roles, and SaaS Directories for launch lists. Machine-readable index: https://ihatereading.in/llms.txt. Latest articles JSON: https://ihatereading.in/articles.json. RSS: https://ihatereading.in/rss.xml (also /feed.xml). Topics: https://ihatereading.in/topics (e.g. /topics/react). Search: https://ihatereading.in/search?q={query}. Blog sitemap: https://ihatereading.in/sitemap-blogs.xml. Sitemap index: https://ihatereading.in/sitemap_index.xml. About: https://ihatereading.in/about.

Machine-readable index: https://ihatereading.in/llms.txt. XML sitemap: https://ihatereading.in/sitemap.xml. Agent instructions: https://ihatereading.in/agent-instructions.md.

Show previous threadShow next thread

15 Ways to Improve the Performance of Your React Application

Principles you must follow to develop a performant application.

Mar 13, 2024
min

Copy HTML

Copy Markdown

15 Ways to Improve the Performance of Your React Application cover image

Getting started

I won’t take much time in introducing the topic. So, let’s directly jump into the ways to improve performance.

Use onBlur to update the state from the input value

Instead of updating state or redux store directly from the input element, I prefer using the onBlur property rather than onChange. onChange critically creates so many performance issues especially when used with redux, so try to avoid it.

User Pure component for static components

If you are sure that any particular child component is static or won’t aesthetically change frequently, then make it a pure component. This avoids absurd re-renderings of that particular component which is not even required.

Use Memoization to prefer tree shaking

Memoization means caching the result to improve the performance. Memoizing the component using useMemo hooks or in other ways is basically caching the component node in the virtual DOM and only updating once the state or props of that particular component changes. This is very effective when you are working with large sets of lists. I prefer using every item of the list as memoized so that React DOM can perform tree shaking.

Use conditional rendering in React hooks or inside componentshouldUpdate method

Whether you are working with class components or functional components, make sure you provide conditional re-rendering inside the useEffect or componentShouldUpdate method. Most of the time, we forget to take care of it even though we know this might cause unnecessary re-rendering.

Use lazy loading while working with large sets of images

I’ve already covered a story about the new image component of Next.js. I am not sure how we can use this in React Native but in React, always prefer lazy loading, especially when your application has heavy file rendering.
A perfect way to load Images in ReactWorking with images in Next JS, caching and lazy loading- the proper waymedium.com

Prefer pagination instead of fetching all data

This is so easy to grab but still, we avoid using this phenomenon. Providing pagination has an impact on the business side of your product because your users hardly go to page number 3 or 4 unless your website is Amazon. But still, having 10 items loading fast is way better than loading 20 -30 items altogether in 10–20 seconds. Also, fetching the first 10 items is way faster than fetching all the items.

Prefer GraphQL to avoid over-fetching data

When I was developing a graph for bitcoin and other currencies, I understood the major issue of why our graphs were slow and lagged a bit. It’s because we were over-fetching the data. It certainly makes no sense to me to over-fetch the key-value pairs which are not required in the frontend. Anyway, we ended up making a GraphQL query over our REST endpoints which improved our application performance by 40%. This was so great.
Calling REST API inside GraphQL queriesYou don’t need to switch our backend from REST to GraphQL, instead, fetch REST query inside Graph QL.javascript.plainenglish.io

Avoid re-rendering, this is a common mistake

Re-rendering or unnecessary rendering is so common in React applications. I will not cover this in detail as this is a common mistake and there are tonnes of articles available on the internet to learn.

Take care of memory leaks, especially in React Native

This is important. Most of the time, when your emulator shuts down in the middle of development, this is because of memory leaks. Memory leaks occur when JavaScript functions fill the heap stack or when you perform an infinite loop. So, make sure you end that while or for loop or return some value from the function you had called in any of the components.

If using Axios, use the cancel token property to avoid overcalling API

I will cover a completely detailed new story about this. Axios does provide a cancel token approach to cancel the API request in case you have already made an API. This is an optimised and useful process when you want to make API calls very frequently. For example, for search input or filter inputs and so on.
If you want to read more about it:
axios npm module

Use callback function inside useState instead of calling multiple setState

Let me give you an example:
const [ formValue, setFormValues ] = useState({
  email: String,
  password: String,
  username: String,
  rememberMe: Boolean
});
function handleFormChange(e){
  const name = e.target.name;
  const val = e.target.value;
  setFormValues(prev => ({...prev, [name]: val }))
}
This is the perfect way of updating the state using a callback in the setState function rather than calling a different set state for each state value you want to update. So make sure you use the useState hook in the appropriate manner.

Try not to put much pressure on useEffect or componentDidMount and on constructor methods

Most of the time, we prefer API calls in the componentDidMount or in the useEffect hook. This is a good idea, but sometimes, one single component requires 3-4 API requests to be made. In that case, our useEffect or componentDidMount is overburdened or under too much pressure. Even if you want to make 3-4 API requests, prefer using the Axios.all method and meanwhile, show some data fetching indicator to the user. It's always a good approach to make API calls in a particular order in a prioritized manner.

Prefer FlatList or SectionList over the map function in React Native

I’ve covered a detailed story about how to use FlatList with memorized items and with lazy loading and pagination property. This is so important in the case of the performance of React Native apps. Using the ScrollView component instead of the FlatList does have consequences in the performance domain.

Measuring page rendering time

I am still searching for third-party tools to measure the page rendering time of every page in React and React Native applications. This will be so helpful when it comes to analysing the complete performance of your application. Understanding how much time each and every page takes in initial rendering, including the time of those API calls, will definitely help us in improving the page speed by prioritizing the most important component being rendered first and making those API calls in a particular order.

Lastly, do provide keys to the mapped items

We know React uses Virtual DOM and to differentiate or compare the node, React uses the key values. If you forgot to provide the key then all the items, will be termed as the same and React won't able to differentiate. This makes it very difficult for virtual DOM to track the changes. Not using the key to differentiate between the virtual DOM and actual DOM means you are not using the virtual DOM property in the most efficient manner which again causes performance issues.

Conclusion

Working on improving the performance of your application is not an easy task. This really takes a hell of a lot of knowledge and understanding of how the framework works under the hood. I would highly recommend choosing the performance task in your company as it improves your knowledge.
See you in the next one
Shrey

Subscribe

Our once a week newsletter on Programming, Jobs, AI, and Business