Optimization may overkill Performance (React)

𝗝𝘂𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗪𝗲 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 "𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸" 𝗵𝗼𝗼𝗸 𝘁𝗼 𝗯𝗼𝗼𝘀𝘁 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲.

𝗦𝗲𝗻𝗶𝗼𝗿 𝗗𝗲𝘃: 𝗦𝗲𝗿𝗶𝗼𝘂𝘀𝗹𝘆 (𝘄/𝘁 𝗰𝗵𝗲𝗰𝗸𝗶𝗻𝗴 𝗽𝗿𝗼𝗳𝗶𝗹𝗶𝗻𝗴)? 𝗜 𝘁𝗵𝗶𝗻𝗸 𝗶𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝗮 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗸𝗶𝗹𝗹!

^ ^ In continuation to the last post (React.memo):

When a component gets a function as a prop from its parent, then whenever a parent is rendered, its child component will get re-rendered every time no matter even if you have used React.memo().

Do checkout the video for more details:
https://youtu.be/5aH_b5pUAHI

<𝗕𝗶𝗴𝗟𝗶𝘀𝘁 𝗶𝘁𝗲𝗺𝘀={𝗶𝘁𝗲𝗺𝘀} 𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸={𝗶𝘁𝗲𝗺𝗖𝗹𝗶𝗰𝗸} />

In above line, even if is passed via React.memo, It will still re-render because itemClick function will get re-created every time the parent component is rendered.

𝗜 𝗵𝗮𝘃𝗲𝗻'𝘁 𝗰𝗵𝗮𝗻𝗴𝗲𝗱 𝘁𝗵𝗲 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, 𝗯𝘂𝘁 𝘄𝗵𝘆 𝘄𝗶𝗹𝗹 𝗶𝘁 𝘀𝘁𝗶𝗹𝗹 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿?

This is how Javascript works, you should know that two references are never equal.

[1,2] === [1,2] //false
1==1 //true (primitives are equal)

Primitive values will be the same on every re-render but objects will be different (functions are objects in Javascript).

To prevent this, just wrap your function with useCallback hook.

𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸(𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻, [𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝗶𝗲𝘀])
//Here we are saying to use the same function on re-renders
//If you pass an array of dependencies, then whenever any of the dependencies change, then a new function will be used.

𝗗𝗼𝗲𝘀 𝗶𝘁 𝗺𝗲𝗮𝗻 𝘁𝗵𝗮𝘁 𝗜 𝘀𝗵𝗼𝘂𝗹𝗱 𝘄𝗿𝗮𝗽 𝗲𝘃𝗲𝗿𝘆 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻𝘀𝗶𝗱𝗲 𝗺𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸?

You should 𝗡𝗘𝗩𝗘𝗥 do that, Here are the reasons:

1. Optimisation always does come with a cost, it's a special function that will never be garbage collected and will always have a reference in the memory.

2. Extra check for the different values in the array of dependencies to see if these dependencies are changed then they have to recreate the newer function.

3. Don’t forget that useCallback() hook is called every time the parent component renders. Even useCallback() returns the same function object, still the inline function is re-created on every re-rendering (useCallback() just skips it).

𝗛𝗼𝘄 𝘁𝗼 𝗱𝗲𝗰𝗶𝗱𝗲 𝘄𝗵𝗲𝘁𝗵𝗲𝗿 𝘁𝗼 𝘂𝘀𝗲 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸() 𝗼𝗿 𝗻𝗼𝘁?

There will never be a single answer to this problem, So always run your profiler and see what performance gain you will get and then decide.

Comments

[Bryan Lumbantobing]

please create article about how to use profiler properly and how to analyze it 🙏