DEV Community

📖 History of "Stop unnecessary re-rendering component in React !!"

Kaziu on May 07, 2022

once upon time... 💎 Generation of class component 🚩 Pure component() Compare new and old props/state, if there is difference...
Collapse
 
thuutri2710 profile image
Tris

and Object, Array is pass by reference
I dont think it's actually true. In JS, we only have pass-by-value. Pass-by-reference means we will pass the ADDRESS of VARIABLE. But in JS, we pass the object which variable is referring. So it's not pass-by-reference

Collapse
 
jorge_rockr profile image
Jorge Ramón

Everything in JavaScript is pass-by-reference so if your function modifies an object or array then the change applies to the original object.

The case of the "pass-by-value" in primitive date types it's because primitive data types are immutable so yeah, you are still passing the reference to a function but it doesn't matter cause its immutability

Collapse
 
thuutri2710 profile image
Tris
Thread Thread
 
jorge_rockr profile image
Jorge Ramón

Thanks, exactly what I said but remember primitives are immutable so that why they act as "pass-by-value"

Thread Thread
 
thuutri2710 profile image
Tris

Oh, let me confirm again. In JS, we only "pass-by-value"

Thread Thread
 
jorge_rockr profile image
Jorge Ramón

Okay, I got your point.

Technically, JS works "pass-by-value" since you pass a copy of a reference. But if you modify that copy of the reference then it modifies the original object so that's basically "pass-by-reference" xd

Same as Primitive Data Types Immutability is basically the same as pass-by-value.

So it depends, you can see the glass half empty or half full

Thread Thread
 
thuutri2710 profile image
Tris

Agree with you

Collapse
 
alienjedi profile image
Andrews Kangah

I think there's problem with React.memo example. Change determination function should be like the following instead...
return nextProps.value !== prevProps.value

Not like the following...
return nextProps.value === prevProps.value

Because it should re-render only when old value not equal to new value

Collapse
 
atomeistee profile image
AtomEistee

Amazing explanations, but my small problem is that i quite dont understand when exactly do i need one of this things, i guess i will understand it with time cuz i think there is no universal rule for each website. Thanks for this article.

Collapse
 
daneelf profile image
Danae

Very informative! Would be nice to have an example for useCallback too though! It is not very clear to me :/

Collapse
 
rainson12 profile image
Rainson12

+1 for the example of the useCallback. Would appreciate it.

Collapse
 
taowen profile image
Tao Wen

re-rendering could also be caused by react context, it can skip your parent and directly re-render some child