Common React performance mistakes 💣
Tags: react, javascript, performance, webdev
Published: 2021-10-20 13:04:15

Performance optimisation is one of the challenges of a software developer. 

It is a big burden when you start to optimise the application after months | years of development. No other go actually we need to somehow visit the code back to optimising the application performance wise. 

But the burden can be minimized by following some performance optimization & best practices while writing the code.

At the same time optimization is a "_two edged sword_" . 

>*Performance-related changes applied incorrectly can even harm performance.*

Here I'll explain some things that I've seen and faced in react applications. 

#React.memo 

If you're using react, you'll be aware of this particular HOC. It is mainly used to memoize the whole component. 
![memozied children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9zqzks9rckjzitx2g23.png)

this is a memoized child component that receives handleOnClick as the props . So as per the memoization logic this component should re-render only if any of the props changes rit ?? that's how **React.memo** works but wait let's create a parent component and check. 

![Parent memo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te9jeagj3a3mohy4x1la.png)

perfect so during every onClick trigger in the child component parent state value changes but the props received in the child didn't change, so child component won't re-render since we memoized. 

But wait here's where the real issue comes in if you try the above code in any editor or there's a codesandbox below you can see that the **React.memo** is broken!, child component will re-render for every state change even though the prop is same. 

Is something wrong with the **React.memo** 🤯 ? 

Nope ! every time when the parent component re-renders a new instance of the _handleOnClick_ function is created. Hence is leads to break the memoization and re-renders the child component every time.

So, If you just wrap the child component with **React.memo** there's no assurance that I will just memoize and work.

_But cool hook useCallback can come in to help you out ! . Wrap the handleClick function inside the useCallback hook and try the same code **React.memo** will just work as expected._

![callback wrapper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj1e2rkuyi1prfi8ibp4.png)

_but the above one is also overratted I would say , will explain this why later in the article_
_play here_

{% codesandbox silly-microservice-hmxbd %}

>Don't use the **React.memo** in a component that props is frequently changing, it will result to an extensive calculations.

#Inline functions 
 ```javascript 
return (
 <div>
  <button onClick={()=>setState(state+1)}>Increment</button>
 </div>
 )
  ```

whenever a developer caught this code everyone (including myself 🤩) update the following code and will be like ! 
```javascript
const handleIncrement = () => setState(state+1);
return (
 <div>
  <button onClick={handleIncrement}>Increment</button>
 </div>
 )
```

yeah I've fixed a dam performance issue I going to get 100 performance score in lighthouse.

![gif](https://media.giphy.com/media/JpvpNkks0DCURtrB1b/giphy.gif)

but _inline is acutally fine_ in this case !! if you have a concern try working with this 
 >useEffect(()=>{
  > console.log('Executing')
  >},[setState])
 
you cannot use a user defined function inside the useEffect if you're using eslint it will warn you !! but the above code will just work fine because react is smart in this case it knows that setState will never change !.

>**Caution**❌ : In-line functions shouldn't be called without arrow functions 

```javascript 
<button onClick={handleIncrement()}>Increment</button>
```
❌ this might result your code to an infinite loop

#useCallback 

> **Does it make sense using this hook here??🤔**

this is the first question you should think off before use using these performance hooks like useCallback and useMemo . 

The same example used above is also a overrated one , _don't get confused here_ above example is just to explain you how things works ! but imagine the child component just re-renders a "div" and a "p" tag . There's no expensive calculations or any CPU affecting operations here, So why useCallback here ? 

If the child component consist of large amount of data or a extensive calculations, the callback function that you're passing can be wrapped up using useCallback . 

> Remember Even useCallback() returning the same function object, still the inline function is re-created on every re-rendering useCallback() just skips it. So the re-render will be less commutated than using the useCallback here !

_The same set of rules can be applied to **useMemo** too_ 

***

Manage your Work From Home 🏡 issues using this [kit] a helper site I've made (https://dev.to/karthick3018/manage-work-from-home-effectively-using-wfh-kit-6bc)

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)
*check my styles on* [codepen](https://codepen.io/karthick30)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*