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

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
 
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
 
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
 
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