Ghajini

Solving data lose issues on component re-renders

Ghajini is a movie about a short-term memory loss patient(acted by Aamir Khan) who sets out on his journey to avenge the death of his beloved girl.

In a nutshell, React components are similar to Aamir Khan in Ghajini. They both lose memories in short intervals.

React components don’t remember the values of variables and functions when they are re-rendered. In this post, we’ll see the problems with shorter memory and the ways in which we solve them.

Persist using useState

There were some critical data that Aamir Khan didn’t want to forget, so he got them tattooed on his body. Something like ‘Kalpana was killed’, also there were some side effects(actions) triggered whenever he read this data.

Similarly in React, we can save critical data using useState and whenever this data is changed, it triggers many side effects. This data will be persisted during component re-rendering.

Persist using useRef

Aamir khan always carried an instant printable camera with him. He would take multiple photos as a reference to his memory. Later he would revisit photos and connect the dots.

Something that many don’t know is that useRef can be used to store data between re-renders and also it doesn’t trigger any side effects when they are changed. useRef creates a reference of data the way an instant printable camera does.

Persist using useMemo

It took 2 years to collect data and to figure out the killers of his girlfriend and their whereabouts. In order to store this data, Aamir carefully plotted details on his wall.

When there are data that involve expensive(time taking) calculations, losing that data on every rerender and calculating it on every render can slow down our application. In these cases, we could wrap the expensive calculation with useMemo. So that the data is not calculated on every render, it’ll be recalculated only when any of its dependencies are changed.

Persist using useCallback

In the end, while fighting with his girlfriend's killers, Aamir suddenly forgets everything. Taking this as an opportunity the killer stabs Aamir. While Aamir unconsciously lies on the floor, he sees the killer hitting another girl. This reminded Aamir of his girlfriend, the killer and he recalls everything. He gets up and finally kills his girlfriend's killer.

Whenever a component is rerendered, all the functions inside the component are recreated. So if a component changes a lot of time it will create a new function that many times. In cases like these, we could wrap the function with useCallback. Then these functions are stored and they are not created again on rerenders unless any of their dependencies are changed.

Note

useCallback and useMemo hooks improve the performance of the application which also means they should be only used when we feel the need of improving performance or when we observe that the application is getting slow. A lot of times they are used up front where they are not required. Avoid these pitfalls.

Every time I have reminded you all that if you like what you read then do share this with your friends and colleagues. Or you could give a shout-out on your preferred social platform. But like Aamir khan in Ghajini, you people forget to do it.