In this tech blog, we will have a look at the top techniques to speed up react app.

Immutable data structure: –

Data that cannot be changed is called immutable, react usually update the DOM when the newly returned element with the previous rendered element is not equal. Changing the state should be done in a careful manner.

An above image is a mutable form of approach, but the concern here is we are changing variable name users which hold a reference to the state variable, the problem will react wonts re-render the UI because it has the same reference. 

  • The possible solution are: – For arrays: use [ ].concat or es6 [ …params]
  • For objects: use Object.assign({}, …) or es6 {…params}

React.Fragment: –

It helps you to avoid extra html element wrapper’s or without adding extra nodes to the dom, fragments let you group a list of children. 

There is also an alternative way of writing react fragment which is more concise or sugar syntactic in nature.

Lazy Loading: –

This is one of the great techniques for optimizing and improving the render time of your app. Lazy loading stands for load component when only needed.

React.Memo: –

It helps you to provide functional components and the ability to cache. When a function is rendered using this technique it saves the result in memory and when the next time function with the same argument is called it returns the result from the saved memory, without repeatably executing the function again when the UI is rendered saving extra computation or bandwidth.

UseCallback: –

It is the react hook which returns memorized callback function. It is somewhat similar to useMemo. Only the difference is that useMemo returns memorized value where as useCallback returns memorize call back function.

It is the complex version of useMemo because in useMemo props contain function will hinder the creation of cache result because it only works on value to eliminate this problem we used useCallBack hook on that particular function which facilitates functional cache which in turns stops the re-render when the prop didn’t change.  

If you wish to know more about mobile app development services from us, please reach out to us today!