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.

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.

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.

but the above one is also overratted I would say , will explain this why later in the article
play here

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

Inline functions

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 !

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.

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

<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
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe